vue文件树组件使用详解


Posted in Javascript onMarch 29, 2018

本文实例为大家分享了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 ? '-' : '+'}}]</span>
  </div>
  <ul v-show="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' }
   ]
  }
  ]
 }
 ]
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
javascript不可用的问题探究
Oct 01 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JS中常用的正则表达式
Sep 29 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 #Javascript
javascript实现文件拖拽事件
Mar 29 #Javascript
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 #Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JsRender for object语法简介
2014/10/31 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Python与R语言的简要对比
2017/11/14 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python3多线程知识点总结
2019/09/26 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
python中xlutils库用法浅析
2020/12/29 Python
css3中transition属性详解
2014/09/02 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
春节活动策划方案
2014/01/24 职场文书
2014庆六一活动方案
2014/03/02 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
教研活动主持词
2015/07/03 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android