index.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <div class="muen-box">
  3. <div class="muen-item" v-for="item in muenList">
  4. <p class="muen-item-val" @click.stop="onMuenCallBack(item)">
  5. <span
  6. class="muen-item-tag iconfont_feixinyun"
  7. v-if="activeMuen(activeKey, item.key)"
  8. >
  9. &#xe632;
  10. </span>
  11. <span class="muen-item-tag iconfont_feixinyun" v-else> &#xe633; </span>
  12. <span>{{ item.label }}</span>
  13. </p>
  14. <div class="children-box" v-show="activeMuen(activeKey, item.key)">
  15. <ChildrenMuen
  16. :muen-list="item.children"
  17. :active-key="activeKey"
  18. @onMuen="(e) => onMuenCallBack(e)"
  19. />
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script setup lang="ts">
  25. import { ref, watch } from "vue";
  26. import { activeMuen } from "./common";
  27. import ChildrenMuen from "@/components/DocumentMuen/ChildrenMuen.vue";
  28. const $emits = defineEmits(["onMuenContent"]);
  29. const activeKey = ref<String | Number>(0);
  30. const onMuenCallBack = (e) => {
  31. if (activeKey.value === e.key) {
  32. const s = `${e.key}`;
  33. if (s.indexOf("-") === -1) {
  34. activeKey.value = 0;
  35. return;
  36. }
  37. }
  38. activeKey.value = e.key;
  39. };
  40. watch(activeKey, (newV, oldV) => {
  41. // console.log('activeKey', newV)
  42. $emits("onMuenContent", newV);
  43. });
  44. const muenList = [
  45. {
  46. label: "短信https接口文档",
  47. key: "1",
  48. children: [
  49. {
  50. label: "相同内容群发",
  51. key: "1-1",
  52. children: [
  53. {
  54. label: "相同内容群发",
  55. key: "1-1-1",
  56. },
  57. {
  58. label: "相应信息说明",
  59. key: "1-1-2",
  60. },
  61. {
  62. label: "下发demo",
  63. key: "1-1-3",
  64. },
  65. ],
  66. },
  67. {
  68. label: "相同内容群发(简单版)",
  69. key: "1-2",
  70. children: [
  71. {
  72. label: "相同内容群发",
  73. key: "1-2-1",
  74. },
  75. {
  76. label: "相应信息说明",
  77. key: "1-2-2",
  78. },
  79. {
  80. label: "下发demo",
  81. key: "1-2-3",
  82. },
  83. ],
  84. },
  85. ],
  86. },
  87. {
  88. label: "短信https接口文档",
  89. key: "2",
  90. children: [
  91. {
  92. label: "相同内容群发",
  93. key: "2-1",
  94. children: [
  95. {
  96. label: "相同内容群发",
  97. key: "2-1-1",
  98. },
  99. {
  100. label: "相应信息说明",
  101. key: "2-1-2",
  102. },
  103. {
  104. label: "下发demo",
  105. key: "2-1-3",
  106. },
  107. ],
  108. },
  109. {
  110. label: "相同内容群发(简单版)",
  111. key: "2-2",
  112. children: [
  113. {
  114. label: "相同内容群发",
  115. key: "2-2-1",
  116. },
  117. {
  118. label: "相应信息说明",
  119. key: "2-2-2",
  120. },
  121. {
  122. label: "下发demo",
  123. key: "2-2-3",
  124. },
  125. ],
  126. },
  127. ],
  128. },
  129. ];
  130. </script>
  131. <style scoped lang="scss">
  132. .muen-box {
  133. width: calc(100% + 40px);
  134. height: 100%;
  135. overflow: hidden;
  136. overflow-y: auto;
  137. padding: var(--size-20) var(--size-28);
  138. .muen-item {
  139. width: 100%;
  140. :deep(.muen-item-val) {
  141. padding: var(--size-10) 0;
  142. display: flex;
  143. align-items: center;
  144. cursor: pointer;
  145. .muen-item-tag {
  146. // width: 24px;
  147. width: 2em;
  148. font-size: 16px;
  149. }
  150. }
  151. }
  152. }
  153. :deep(.children-box) {
  154. padding: 0 40px 0 2em;
  155. }
  156. </style>