123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- <template>
- <div class="muen-box">
- <div class="muen-item" v-for="item in muenList">
- <p class="muen-item-val" @click.stop="onMuenCallBack(item)">
- <span
- class="muen-item-tag iconfont_feixinyun"
- v-if="activeMuen(activeKey, item.key)"
- >
- 
- </span>
- <span class="muen-item-tag iconfont_feixinyun" v-else>  </span>
- <span>{{ item.label }}</span>
- </p>
- <div class="children-box" v-show="activeMuen(activeKey, item.key)">
- <ChildrenMuen
- :muen-list="item.children"
- :active-key="activeKey"
- @onMuen="(e) => onMuenCallBack(e)"
- />
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref, watch } from "vue";
- import { activeMuen } from "./common";
- import ChildrenMuen from "@/components/DocumentMuen/ChildrenMuen.vue";
- const $emits = defineEmits(["onMuenContent"]);
- const activeKey = ref<String | Number>(0);
- const onMuenCallBack = (e) => {
- if (activeKey.value === e.key) {
- const s = `${e.key}`;
- if (s.indexOf("-") === -1) {
- activeKey.value = 0;
- return;
- }
- }
- activeKey.value = e.key;
- };
- watch(activeKey, (newV, oldV) => {
- // console.log('activeKey', newV)
- $emits("onMuenContent", newV);
- });
- const muenList = [
- {
- label: "短信https接口文档",
- key: "1",
- children: [
- {
- label: "相同内容群发",
- key: "1-1",
- children: [
- {
- label: "相同内容群发",
- key: "1-1-1",
- },
- {
- label: "相应信息说明",
- key: "1-1-2",
- },
- {
- label: "下发demo",
- key: "1-1-3",
- },
- ],
- },
- {
- label: "相同内容群发(简单版)",
- key: "1-2",
- children: [
- {
- label: "相同内容群发",
- key: "1-2-1",
- },
- {
- label: "相应信息说明",
- key: "1-2-2",
- },
- {
- label: "下发demo",
- key: "1-2-3",
- },
- ],
- },
- ],
- },
- {
- label: "短信https接口文档",
- key: "2",
- children: [
- {
- label: "相同内容群发",
- key: "2-1",
- children: [
- {
- label: "相同内容群发",
- key: "2-1-1",
- },
- {
- label: "相应信息说明",
- key: "2-1-2",
- },
- {
- label: "下发demo",
- key: "2-1-3",
- },
- ],
- },
- {
- label: "相同内容群发(简单版)",
- key: "2-2",
- children: [
- {
- label: "相同内容群发",
- key: "2-2-1",
- },
- {
- label: "相应信息说明",
- key: "2-2-2",
- },
- {
- label: "下发demo",
- key: "2-2-3",
- },
- ],
- },
- ],
- },
- ];
- </script>
- <style scoped lang="scss">
- .muen-box {
- width: calc(100% + 40px);
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- padding: var(--size-20) var(--size-28);
- .muen-item {
- width: 100%;
- :deep(.muen-item-val) {
- padding: var(--size-10) 0;
- display: flex;
- align-items: center;
- cursor: pointer;
- .muen-item-tag {
- // width: 24px;
- width: 2em;
- font-size: 16px;
- }
- }
- }
- }
- :deep(.children-box) {
- padding: 0 40px 0 2em;
- }
- </style>
|