ChildrenMuen.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <div class="children-muen">
  3. <template v-for="item in muenList">
  4. <!-- <p
  5. :class="['muen-name', activeMuen(activeKey, item.key) ? 'active-muen-name' : '']"
  6. @click.stop="$emits('onMuen', item)"
  7. >
  8. <span class="iconfont_feixinyun"></span>
  9. {{ item.label }} {{ activeKey }}
  10. </p> -->
  11. <div
  12. :class="[
  13. 'muen-item-val children-muen-item',
  14. activeMuen(activeKey, item.key) ? 'active-muen-name' : '',
  15. ]"
  16. @click.stop="$emits('onMuen', item)"
  17. >
  18. <p class="muen-item-tag">
  19. <template v-if="item.children && item.children.length > 0">
  20. <span class="iconfont_feixinyun" v-if="activeMuen(activeKey, item.key)">
  21. &#xe634;
  22. </span>
  23. <span class="iconfont_feixinyun" v-else>&#xe635;</span>
  24. </template>
  25. </p>
  26. <span>{{ item.label }}</span>
  27. </div>
  28. <div
  29. class="children-box"
  30. v-if="activeMuen(activeKey, item.key) && item && item.children"
  31. >
  32. <ChildrenMuen
  33. :muen-list="item.children"
  34. :active-key="activeKey"
  35. @onMuen="(e) => $emits('onMuen', e)"
  36. />
  37. </div>
  38. </template>
  39. </div>
  40. </template>
  41. <script setup lang="ts">
  42. import { ref } from "vue";
  43. import { activeMuen } from "./common";
  44. const $emits = defineEmits(["onMuen"]);
  45. const props = defineProps({
  46. activeKey: { type: [String, Number], default: () => 0 },
  47. muenList: {
  48. required: true,
  49. type: Array,
  50. default: () => [],
  51. },
  52. });
  53. </script>
  54. <style scoped lang="scss">
  55. .children-muen {
  56. .children-muen-item {
  57. width: 100%;
  58. }
  59. .children-box {
  60. padding-right: 0;
  61. }
  62. .active-muen-name {
  63. background-color: #ebf2fc;
  64. color: #006efe;
  65. }
  66. }
  67. </style>