DDR爱好者之家 Design By 杰米
本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下
本文主要是分析vue官方仓库里的文件树组件[vue github]
demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm
首先是html模板:
<li> <div //文件夹加粗表示 :class="{bold: isFolder}" //处理单击事件 打开闭合文件列表 @click="toggle" //处理双击事件 双击子文件,子文件属性变为文件夹 @dblclick="changeType"> //显示文件名 {{model.name}} //若是文件夹的话则显示[+]来控制文件夹的开关闭合 <span v-if="isFolder">[{{open "open" v-if="isFolder"> //利用v-for显示子文件列表,通过递归使用item组件来完成文件树 <item class="item" v-for="model in model.children" :model="model"> </item> //增加一个+标记,单击可以增加子文件 <li class="add" @click="addChild">+</li> </ul> </li>
接下来是组件部分的源码:
Vue.component('item', { template: '#item-template', props: { model: Object //将文件数据通过props传入 }, data: function () { return { open: false //open表示文件夹闭合状态 } }, computed: { isFolder: function () { return this.model.children && this.model.children.length } }, //计算对象是否有子节点并且子节点数大于0来判断是否是文件夹 methods: { toggle: function () { if (this.isFolder) { this.open = !this.open } }, //控制文件夹闭合的方法 单击触发改变open changeType: function () { if (!this.isFolder) { Vue.set(this.model, 'children', []) this.addChild() this.open = true } }, //双击触发,通过给文件增加子节点来使文件属性变成文件夹 addChild: function () { this.model.children.push({ name: 'new stuff' }) //点击文件夹里的+节点触发 为文件夹添加一个新文件 } } })
所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件,然后通过递归复用<item>组件来展示文件树的效果。
最后是传入组件的数据格式:
var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'child folder', children: [ { name: 'hello' }, { name: 'wat' } ] }, { name: 'hello' }, { name: 'wat' }, { name: 'child folder', children: [ { name: 'hello' }, { name: 'wat' } ] } ] } ] }
大家可以根据这个基本的结构继续拓展文件树的功能和展示效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年03月29日
2024年03月29日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸