开发Vue树形组件的示例代码


Posted in Javascript onDecember 21, 2017

本文介绍了Vue树形组件的示例代码,分享给大家,具体如下:

使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的:

<template> 
  <div class="ui menu"> 
   <template v-for="item in leftItems"> 
    <a " v-if="!item.children" @click="item.click"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <div class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </div> 
    </a>  
   //如果有有children则说明是下拉菜单项,然后递归调用自身 
    <template v-else="item.children.length > 0"> 
     <div class="ui dropdown item"> 
      <i class="{{ item.icon }} icon" v-if="item.icon"></i>   
      <div class="text"> {{item.text}}</div> 
      <menubar :items="item.children" ></menubar> 
     </div> 
    </template> 
   </template> 
  //显示在右侧的菜单项,也是递归调用自身 
   <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar> 
  </div> 
</template>

使用时,假如父组件app使用到了menubar组件,那么data中需要定义一下items数据,例 :

menubar:[ 
     {id:"a",text:"主页1",icon:"home",tips:"提示",label:"33",labelColor:"red",url:"#"}, 
     {id:"b",text:"菜单",icon:"edit",tips:"提示",url:"#",children:[ 
       {id:"a",text:"菜单1",click:"test3",icon:"home",url:"#"}, 
       {id:"a",text:"菜单2",click:"test3",icon:"home",url:"#"} 
     ]}, 
     {id:"bb",text:"编辑",tab:"a",icon:"user",vlink:"#"}, 
     {id:"bb",text:"文件",tab:"b",icon:"user",click:"test1"}, 
     {id:"bb",text:"帮助",tab:"c",icon:"help",click:"test2"}, 
     {id:"bb",text:"工具",icon:"user",url:"www.baidu.com"}, 
     {id:"c",text:"设置",icon:"home",tips:"提示",enabled:true,color:"blue",url:"#",right:true,label:"",children:[ 
        {id:"bbb",text:"配置",icon:"home",tips:"提示",click:"test3"}, 
        {id:"adsd",text:"退出",icon:"home",tips:"提示",vlink:"/workdesk",url:"#"} 
        ] 
      } 
   ]

里面的click事件是定义了,当在工具栏中单击时的事件,理想的情况应该是事件定义在父组件app的events里面,像这样:

events:{ 
  eventa:function(){....}, 
  eventb:function(){....}, 
}

工具栏组件是根据传入的items来生成的,包括里面的子组件。最终工具栏组件的结构就是一个树状结构,例似这样的:

MenuBar
--MenuBar                   
----MenuBar
-----MenuBar
--Menubar

由于每个工具栏组件里面的每个Menubar均有自己的上下文,这样当子组件Menubar的click事件触发时并不会调用到顶层app组件events里面定义的事件,而只是调用了父Menubar的events事件。

但是在使用体验上,很明显,工具栏组件的点击事件定义应该是定义在app组件的events里面的才是合理。我们希望menubar:[]定义菜单项时,不管多少级嵌套,事件的触发均可以冒泡到最上面的menubar的父上面。
因此,要实现该机制,目前是采用组件之间的通讯机制来实现的:

<a @click="onMenuItemClick(item,$event)" data-tab="{{item.tab}}" v-link="item.vlink" href="{{item.url}}" rel="external nofollow" v-if="!item.children" :class="[{'active':item.active==true,'disabled':item.enabled==false},item.color,'item']" title="{{item.tips}}"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <div class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </div> 
    </a>

上面定义一个事件@click="onMenuItemClick(item,$event)"

methods:{ 
  onMenuItemClick:function(item,$event){    
   if(this.subMenu){ 
    this.$dispatch("menuItemClick",item,$event)  
   }else{ 
    if(item.click){ 
     this.$parent.$emit(item.click,item) 
    } 
   }   
  } 
 }

在onMenuItemClick触发时,我们根据传入的subMenu来确认点击事件如何处理,如果Menubar是作为子菜单栏处理,则我们就直接向上冒泡事件,否则就在上层父组件触发事件。

<menubar  @menuItemClick="onMenuItemClick" :items="rightItems" sub-menu="true" v-if="rightItems.length > 0"></menubar>

在menubar组件内部调用时就传入submenu=true,并且侦听事件menuItemClick,menuItemClick事件代码这样:

events:{ 
  menuItemClick:function(item,$event){ 
   if(!this.subMenu){ 
    this.$parent.$emit(item.click,item) 
   }else{ 
    return true 
   } 
  } 
 },

小结一下:

在处理嵌套结构的组件,如具有下拉菜单的工具栏、树形组件等时,由于组件内部均具有各自独立的上下文,因此必须使用组件通讯机制来处理内部组件间的通讯。

但如此处理方式,我觉得还是比较麻烦的,理想的方式,我觉得最好的官方可以为组件提供一个直接使用父组件上下文的机制,例如:

<MenuBar> 
 <button scoped="false"></button> 
<button scoped="false"></button> 
</MenuBar>

这样上面的button就没有自己的上下文,而可以直接引入父组件的上下文,这样模式应该在很多场合均会使用到的。

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

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
详解使用vuex进行菜单管理
Dec 21 #Javascript
Angular5.1新功能分享
Dec 21 #Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 #Javascript
webpack写jquery插件的环境配置
Dec 21 #jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 #Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 #Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
初级会计求职信范文
2014/02/15 职场文书
美容院店长岗位职责
2014/04/08 职场文书
新春寄语大全
2014/04/09 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
师德师风自查总结
2014/10/14 职场文书
2014年电教工作总结
2014/12/19 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书