Vue递归组件

树形控件实现

1 .传一个数组进去,根据数组及逆行渲染数据

                    [
                        {
                        name: 'child folder',
                        children: [
                            { name: 'hello' ,path:'/join'},
//级联标签,路由的地址,这样就可以做到是一个左边是路由链接,右边是路由展示
                            { name: 'wat' }
                        ]
                        },
                        { name: '新建群聊',path:'/join' },
                        { name: 'wat' },
                        {
                        name: 'child folder',
                        children: [
                            { name: 'hello' },
                            { name: 'wat' }
                        ]
                        }
                    ]

2 .根据数组的深度,渲染的样式来点区别,传入一个标记,每深入一层就加一
3 .嵌套组件中没有子组件项目的要加上router-link链接
4 .最上面还要加个目录搜索框来搜索过滤链接
5 .动态路由匹配:把所有new/nav/:id下面所属的路由都用右边的router-view显示,这样在router的index配置里面书写非常的简便,就是不知道会不会出锅。。

实现关键

1 .要递归的组件必须有name:‘nav-list’
2 .子组件使用的时候用<nav-list />
3 .如何使用最少的html写出想要的结果
4 .如何保证递归组件出来的效果不是乱糟糟的。。

优化

1 .展开和收起的优化。
2 .展开和收起的样式。不知道为什么watch会出现一些难以复现的状况,所以直接用computed代替了

优化

1 .频繁点开或者关闭导航会触发浏览器的双击选中文字事件,现在想要去掉这个事件。

1.css方面 style="-moz-user-select:none;"
2.js事件: onselectstart="return false"
3.其他选项:element:在指定元素内启动选择时,文本时可以选择的,但是文本选择限制在钙元素的边界内
4.none:文本不可选择,但是在指定元素之外启动的文本选择任然是可输入元素。这里就直接加在了body,让所有的元素都不能双击选中
5.text:指定的元素内启动时,文版时可选择的,文本未限制在元素的边界内,并且是可以越过其边界的
6.

3 .展开和收起的优化。
4 .展开和收起的样式。不知道为什么watch会出现一些难以复现的状况,所以直接用
5 .进行样式优化的时候是否要渲染a的时候用一个外部元素包起来,这样在添加样式的时候就可以添加在外面
6 .路由路径一定要以“/”开头,不然是可以反复点击的,可以不断累积路径。

扩展

1 .加一个参数,isRouter。如果有这个属性的话就是组件路由的效果。如果这个参数是false的话,就是锚点那种效果
2 .

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue 递归组件 前言 对于一些有规律的 dom 结构,我们可以通过递归方式来生成这个结构,,那么在 vue 的模...
    Fate0阅读 18,702评论 1 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,740评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,032评论 3 119
  • 无论你我在哪?我们依旧在同一片天空下,赏着同一轮明月,不是吗?在这蔚蓝星海下你我的心是否还在?你''''''''还...
    晨曦微露潇筱竹阅读 162评论 0 0
  • 文/落沫兮华 我身边有很多这样的人 她们笑了有人陪 哭了有人哄 在他们眼里我就像个不懂悲伤的小孩子 只会像个傻子笑...
    落沫兮华阅读 155评论 0 0