feixinyun/components/DocumentMuen/index.vue

<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)"
        >
          &#xe632;
        </span>
        <span class="muen-item-tag iconfont_feixinyun" v-else> &#xe633; </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>