feixinyun/components/DocumentMuen/ChildrenMuen.vue

<template>
  <div class="children-muen">
    <template v-for="item in muenList">
      <!-- <p
        :class="['muen-name', activeMuen(activeKey, item.key) ? 'active-muen-name' : '']"
        @click.stop="$emits('onMuen', item)"
      >
        <span class="iconfont_feixinyun"></span>
        {{ item.label }} {{ activeKey }}
      </p> -->
      <div
        :class="[
          'muen-item-val children-muen-item',
          activeMuen(activeKey, item.key) ? 'active-muen-name' : '',
        ]"
        @click.stop="$emits('onMuen', item)"
      >
        <p class="muen-item-tag">
          <template v-if="item.children && item.children.length > 0">
            <span class="iconfont_feixinyun" v-if="activeMuen(activeKey, item.key)">
              &#xe634;
            </span>
            <span class="iconfont_feixinyun" v-else>&#xe635;</span>
          </template>
        </p>
        <span>{{ item.label }}</span>
      </div>
      <div
        class="children-box"
        v-if="activeMuen(activeKey, item.key) && item && item.children"
      >
        <ChildrenMuen
          :muen-list="item.children"
          :active-key="activeKey"
          @onMuen="(e) => $emits('onMuen', e)"
        />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { activeMuen } from "./common";
const $emits = defineEmits(["onMuen"]);
const props = defineProps({
  activeKey: { type: [String, Number], default: () => 0 },
  muenList: {
    required: true,
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
.children-muen {
  .children-muen-item {
    width: 100%;
  }
  .children-box {
    padding-right: 0;
  }
  .active-muen-name {
    background-color: #ebf2fc;
    color: #006efe;
  }
}
</style>