<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
工作中需要一種樹形選單元件,經過兩天的構思最終通過作用域插槽實現: 此元件將每個節點(插槽名為 node)暴露出來。
通過插槽的 attributes 向當前插槽節點傳遞子項 item(資料物件)和level(層深)引數,在保持元件內部極簡的同時支援在資料模型中擴充套件性。基本達到比較好的封裝顆粒度,大家可以在此基礎上無限擴充套件封裝具體的業務邏輯。
let list = reactive( [{ name:'1 一級選單', isExpand: true,//是否展開子項 enabled: false,//是否可以響應事件 child:[ { name:'1.1 二級選單', isExpand: true, child:[ { name:'1.1.1 三級選單', isExpand: true, }, ] }, { name:'1.2 二級選單', isExpand: true, }, ] }, { name:'1.1 一級選單', isExpand: true, child:[ { name:'1.1.1 二級選單', isExpand: true, }, { name:'1.1.2 二級選單', isExpand: false, child:[ { name:'1.1.2.1 三級選單', isExpand: true, }, ]}, ] },] );
<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 一級選單', isExpand: true,//是否展開子項 enabled: false,//是否可以響應事件 child:[ { name:'1.1 二級選單', isExpand: true, child:[ { name:'1.1.1 三級選單', isExpand: true, }, ] }, { name:'1.2 二級選單', isExpand: true, }, ] }, { name:'1.1 一級選單', isExpand: true, child:[ { name:'1.1.1 二級選單', isExpand: true, }, { name:'1.1.2 二級選單', isExpand: false, child:[ { name:'1.1.2.1 三級選單', 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}子項)`; }; </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>
<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>
以上就是Vue3 通過作用域插槽實現樹形選單/巢狀元件的詳細內容,更多關於Vue3 樹形選單巢狀元件的資料請關注it145.com其它相關文章!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45