树形控件实现
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 .