当前位置:首页 > 资讯 > info5 > 正文

开发Vue树形组件

发表于: 2016-04-27   作者:wenxuansoft   来源:转载   浏览:
摘要: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: {{item.text}} {{item.label}} //如果有有children则说明是下拉菜单项,然后递归调用自身 0"> {{item.text}} //显示在右侧的菜单项,也是递归调用自身 0"> 使用时,假如父组件app使用到了menubar组件,那么data中需要定义一下it
使用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}}" 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就没有自己的上下文,而可以直接引入父组件的上下文,这样模式应该在很多场合均会使用到的。

开发Vue树形组件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Ext的组件模式,很好的规范了组件设计,用Manager的统一管理,也是很好的方式.下面简单分析一下Ext的组
.树形组件ExpandableListView介绍: ListView组件可以为用户提供列表的显示功能,如果要对列表数据进
在PC上我们已经习惯了树形控件,因为其可以清晰的展现各个节点之间的层次结果,但是在Android平台上
参考了IconUtility组件和网上的一些代码实现,综合了一下 组件代码: package pizazz.flex4.componen
http://hi.baidu.com/vip_qining/item/b8797fd4b96c828f270ae73d ListView:为用户提供了列表显示的
前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣。看过博主博客
flex前台页面: <?xml version="1.0" encoding="utf-8"?> <ui:UIApplication xmlns:fx="ht
我在很久以前曾发布过一个美化的单选下拉框组件,一度很火爆。相信现在读我帖子的人里面仍然有在用
我在很久以前曾发布过一个美化的单选下拉框组件,一度很火爆。相信现在读我帖子的人里面仍然有在用
WPF组件开发 在做组件之前,为了适应框架,我们需要有一个基类,并将这个基类打包成一个模板,让大
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号