结果展示
先给出两张效果图,左侧是百度Echarts的文档中心截图,右侧是我个人结合项目中文档中心截图
项目中假设为后台管理系统,一般左侧导航都是树形递归,当然现在也有很多的UI框架,随便套一下也是可以用的;
楼主这里要总结的是vue组件化的时候,当前树形结构组件自行调用;
仅供项目总结,如有不对的地方,请多多包涵。
代码结构
mTree.vue
:class="{'active':model.path === this.$route.params.filePath}">
:class="{'item-hover': model.type === 'file'}">
export default {
name: 'mTree',
props: ['model', 'index'],
data() {
return {
open: true
}
},
methods: {
toggle: function (model) {
let self = this;
if (model.type === "directory") {
this.open = !this.open;
} else {
console.log('file');
}
}
}
}
.tree-items {
margin: 8px 0 0 0;
padding: 3px;
color: #575d6f;
border-radius: 5px;
cursor: pointer;
user-select: none;
&.active {
.item-title {
color: #1357ba;
}
}
&.onHitClass {
background-color: #dbdce0;
}
.item-title {
line-height: 1px;
font-size: 16px;
font-weight: bold;
color: #575d6f;
&.item-hover {
&:hover {
color: #1357ba;
}
}
}
.item-icon {
display: inline-block;
transform: rotate(-180deg);
margin-left: 12px;
width: 7px;
height: 7px;
background: url('三角形的图片.png') no-repeat center;
transition: all .3s;
&.openmenu {
transform: rotate(0deg);
}
}
.child-list-box {
padding-left: 17px;
.tree-items {
margin: 5px 0;
color: #666;
text-decoration: none;
display: block;
font-weight: 300;
padding: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.item-title {
font-size: 14px;
margin-bottom: 12px;
font-weight: normal;
}
}
}
}
mDemo.vue
import MTree from "./mTree.vue";
let data = [{
"type": "file",
"name": "前端框架",
"path": "about"
}, {
"type": "file",
"name": "前端框架",
"path": "guide"
}, {
"type": "file",
"name": "前端框架",
"path": "zip-guide"
}, {
"type": "file",
"name": "UI模块引擎",
"path": "remote-debugging"
},
{
"type": "directory",
"name": "云API",
"files": [{
"type": "file",
"name": "数据云API",
"path": "component-album"
}, {
"type": "file",
"name": "数据云API",
"path": "component-app"
}]
}
]
let fileFrist = [];
function showFristFile(data) {
for (let i in data) {
let fileModel = data[i];
if (fileModel.type === "file") {
fileFrist.push(fileModel);
} else {
showFristFile(fileModel.files);
}
}
return fileFrist;
}
export default {
data(){
return {
treeModel: data,
retrievalWords: showFristFile(data),
keywords:''
}
},
components: {
MTree
},
methods:{
searchKeywords() {
let self = this;
let retrievalWords = self.retrievalWords;
let keywords = self.keywords;
if (!keywords) {
self.treeModel= self.treeModel;
} else {
let arrKeywords = [];
for (let i = 0; i < retrievalWords.length; i++) {
if (retrievalWords[i].name.toLowerCase().indexOf(keywords.toLowerCase()) !== -1) {
arrKeywords.push(retrievalWords[i]);
}
}
self.treeModel = arrKeywords;
}
}
}
}
总结
整理的有点杂乱,有空重新整理一下,并且贴出完整的代码
项目总结,请多多包涵。