快捷導(dǎo)航

Vue3?通過作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件

更新時(shí)間：2023年01月19日 11:09:49 作者：SoaringHeart

這篇文章主要為大家介紹了Vue3?通過作用域插槽實(shí)現(xiàn)樹形菜單嵌套組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、需求來源

工作中需要一種樹形菜單組件，經(jīng)過兩天的構(gòu)思最終通過作用域插槽實(shí)現(xiàn)：此組件將每個(gè)節(jié)點(diǎn)（插槽名為 node）暴露出來。

通過插槽的 attributes 向當(dāng)前插槽節(jié)點(diǎn)傳遞子項(xiàng) item（數(shù)據(jù)對(duì)象）和level（層深）參數(shù)，在保持組件內(nèi)部極簡的同時(shí)支持在數(shù)據(jù)模型中擴(kuò)展性?；具_(dá)到比較好的封裝顆粒度，大家可以在此基礎(chǔ)上無限擴(kuò)展封裝具體的業(yè)務(wù)邏輯。

二、效果圖

let list = reactive(
  [{ 
    name:'1 一級(jí)菜單',
    isExpand: true,//是否展開子項(xiàng)
    enabled: false,//是否可以響應(yīng)事件
    child:[
      { name:'1.1 二級(jí)菜單',     
        isExpand: true,
        child:[
          { name:'1.1.1 三級(jí)菜單', isExpand: true, },
        ]
      },
      { name:'1.2 二級(jí)菜單', isExpand: true, },
    ]
  },
  { 
    name:'1.1 一級(jí)菜單',
    isExpand: true,
    child:[
      { name:'1.1.1 二級(jí)菜單', isExpand: true, },
      { name:'1.1.2 二級(jí)菜單', 
        isExpand: false, 
        child:[
          { name:'1.1.2.1 三級(jí)菜單', isExpand: true, },
        ]},
    ]
  },]
);

三、使用示例（VTreeNodeDemo.vue）

<template>
  <VTreeNode 
    :list="list"
    :level="level"
  >
    <template #node="slotProps">
      <div class="tree-node">
        {{prefix(slotProps.level)}}{{slotProps.item.name}}{{sufix(slotProps.item)}}
      </div>
    </template>
  </VTreeNode>
</template>
<script setup>
import VTreeNode from '@/components/VTreeNode/VTreeNode.vue';
import { ref, reactive, watch, onMounted, } from 'vue';
let list = reactive(
  [{ 
    name:'1 一級(jí)菜單',
    isExpand: true,//是否展開子項(xiàng)
    enabled: false,//是否可以響應(yīng)事件
    child:[
      { name:'1.1 二級(jí)菜單',     
        isExpand: true,
        child:[
          { name:'1.1.1 三級(jí)菜單', isExpand: true, },
        ]
      },
      { name:'1.2 二級(jí)菜單', isExpand: true, },
    ]
  },
  { 
    name:'1.1 一級(jí)菜單',
    isExpand: true,
    child:[
      { name:'1.1.1 二級(jí)菜單', isExpand: true, },
      { name:'1.1.2 二級(jí)菜單', 
        isExpand: false, 
        child:[
          { name:'1.1.2.1 三級(jí)菜單', isExpand: true, },
        ]},
    ]
  },]
);
const level = ref(0);
const prefix = (count) => {
  return '__'.repeat(count);
};
const sufix = (item) => {
  if (!Reflect.has(item, 'child')) {
    return '';
  }
  return ` (${item.child.length}子項(xiàng))`;
};
</script>
<style scoped lang='scss'>
.tree-node{
  height: 45px;
  display: flex;
  justify-self: center;
  align-items: center;
  // background-color: green;
  border-bottom: 1px solid #e4e4e4;
}
</style>

四、源碼（VTreeNode.vue）：

<template>
  <!-- <div> -->
    <div v-for="(item,index) in list" :key="index">
      <slot name="node" :item="item" :level="levelRef">
        <div>{{ item.name }}</div>
      </slot>
      <div v-show="item.child && canExpand(item)" >
        <VTreeNode :list="item.child" :level="levelRef">
          <template #node="slotProps">
            <slot name="node" :item="slotProps.item" :level="slotProps.level">
              <div>{{ slotProps.item.name }}</div>
            </slot>
          </template>
        </VTreeNode>
      </div>
    </div>
  <!-- </div> -->
</template>
<script setup>
import { ref, reactive, watch, computed, onMounted, } from 'vue';
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
    validator: (val) => {
      return Array.isArray(val) && val.every(e => Reflect.has(e, 'name'));
    }
  },
  level: {
    type: Number,
    default: 0,
  }
});
const emit = defineEmits(['update:level', ])
const levelRef = computed({
  set: (newVal) => {
    if (props.level !== newVal) {
      emit("update:level", newVal);
    }
  },
  get: () => {
    const tmp = props.level + 1;
    return tmp;
  },
});
const canExpand = (item) => {
  return Reflect.has(item, 'isExpand') && item.isExpand;
};
// onMounted(() => {
//   console.log(`levelRef:${levelRef.value}`);
// });
</script>

VTreeNode.vue

VTreeNodeDemo.vue

以上就是Vue3 通過作用域插槽實(shí)現(xiàn)樹形菜單/嵌套組件的詳細(xì)內(nèi)容，更多關(guān)于Vue3 樹形菜單嵌套組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: