vue文件树组件使用详解

vue文件树组件使用详解

本文实例为大家分享了vue文件树组件的实现方法，供大家参考，具体内容如下

本文主要是分析vue官方仓库里的文件树组http://件[vue github]

demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm

首先是html模板：

//文件夹加粗表示

:class="{bold: isFolder}"

//处理单击事件 打开闭合文件列表

@click="toggle"

//处理双击事件 双击子文件，子文件属性变为文件夹

@dblclick="changeType">

//显示文件名

{{model.name}}

//若是文件夹的话则显示[+]来控制文件夹的开关闭合

[{{open ? '-' : '+'}}]

//利用v-for显示子文件列表，通过递归使用item组件来完成文件树

class="item"

v-for="model in model.children"

:model="model">

class="item"

v-for="model in model.children"

:model="model">

//增加一个+标记，单击可以增加子文件

接下来是组件部分的源码：

Vue.component('item', {

template: '#item-template',

props: {

model: Object //将文件数据通过props传入

},

data: function () {

return {

open: false //open表示文件夹闭合状态

}

},

computed: {

http:// 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'

}) //点击文件夹里的+节点触发 为文件夹添加一个新文件

}

}

})

所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件，然后通过递归复用组件来展示文件树的效果。

最后是传入组件的数据格式：

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' }

]

}

]

}

]

}

大家可以根据这个基本的结构继续拓展文件树的功能和展示效果。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。