vue实现目录树结构
更新时间：2022年03月30日 08:03:17 作者：冲浪选手CHARLIE
这篇文章主要为大家详细介绍了vue实现目录树结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现目录树结构的具体代码，供大家参考，具体内容如下
效果图
代码
组件部分 components/leftTree.vue
<template>
<div>
<ul class="all-list">
<li v-for="(item, i) in list" :key="item.key">
<!-- Antd的双击功能 这个看个人需求，不需要的话把'<div class="tree-item expend></div>'提取出来就可以了 -->
<a-dropdown :trigger="['contextmenu']">
<a-menu slot="overlay">
<a-menu-item key="1">
打开文件
</a-menu-item>
<a-menu-item key="2">
新建文件
</a-menu-item>
<a-menu-item key="3">
保存
</a-menu-item>
<a-menu-item key="4">
删除
</a-menu-item>
</a-menu>
<div class="tree-item expend">
<div
v-if="item.icon === 'file' || item.icon === 'openfile'"
class="icon-size"
:class="
openArr.includes(i) ? 'reduce-icon' : 'expend-icon'
"
@click="toggle(i)"
></div>
<i v-if="item.icon === 'file'"
><img src="../assets/file.png"
/></i>
<i v-if="item.icon === 'openfile'"
><img src="../assets/openfile.png"
/></i>
<i v-if="item.icon === 'vue'"
><img src="../assets/Vue.png"
/></i>
<i v-if="item.icon === 'js'"
><img src="../assets/js.png"
/></i>
<i v-if="item.icon === 'react'"
><img src="../assets/React.png"
/></i>
<i v-if="item.icon === 'sass'"
><img src="../assets/Sass.png"
/></i>
<i v-if="item.icon === 'vim'"
><img src="../assets/vimeo.png"
/></i>
<i v-if="item.icon === 'ts'"
><img src="../assets/ts.png"
/></i>
<i v-if="item.icon === 'php'"
><img src="../assets/php.png"
/></i>
<i v-if="item.icon === 'less'"
><img src="../assets/less.png"
/></i>
<i v-if="item.icon === 'java'"
><img src="../assets/java.png"
/></i>
<i v-if="item.icon === 'c++'"
><img src="../assets/c++.png"
/></i>
<i v-if="item.icon === 'markdown'"
><img src="../assets/markdown.png"
/></i>
<i v-if="item.icon === 'py'"
><img src="../assets/py.png"
/></i>
<i v-if="item.icon === 'go'"
><img src="../assets/go.png"
/></i>
<span class="content" @click="changeActive(item, i)">{{
item.title
}}</span>
</div>
</a-dropdown>
<!-- 递归 -->
<div
v-show="openArr.includes(i)"
v-if="item.children && item.children.length"
>
<leftTree class="item" :list="item.children"></leftTree>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "leftTree",
data() {
return {
openArr: [],
checkboxIds: [],
};
},
props: {
list: {
type: Array,
},
},
methods: {
toggle(i) {
if (this.openArr.includes(i)) {
let index = this.openArr.indexOf(i);
this.openArr.splice(index, 1);
} else {
this.openArr.push(i);
}
},
changeActive(item, i) {
if (!item.children) {
if (item.icon === "file") {
this.toggle(i);
item.icon = "openfile";
} else if (item.icon === "openfile") {
this.toggle(i);
item.icon = "file";
} else {
alert("最后一个文件");
}
} else {
if (item.icon === "file") {
this.toggle(i);
item.icon = "openfile";
} else if (item.icon === "openfile") {
this.toggle(i);
item.icon = "file";
}
}
},
},
};
</script>
<style lang='less' scoped>
i {
line-height: 0;
img {
width: 16px;
height: 16px;
}
}
.item {
padding-left: 4px;
}
.bold {
font-weight: bold;
}
ul {
line-height: 1.5em;
list-style-type: none;
white-space: nowrap;
position: relative;
}
li {
list-style-type: none;
padding: 4px;
user-select: none;
}
.tree-item {
display: flex;
align-items: center;
}
.expend {
position: relative;
}
.expend::before {
content: "";
position: absolute;
width: 6px;
left: 9px;
top: 10px;
border-top: 1px dotted #c3c5c8;
}
.all-list::before {
content: "";
position: absolute;
width: 1px;
height: calc(100% - 40px);
left: 48px;
top: 20px;
border-left: 1px dotted #c3c5c8;
}
.item .expend::before {
content: "";
position: absolute;
width: 6px;
left: -11px;
top: 10px;
border-top: 1px dotted #c3c5c8;
}
.item .all-list::before {
content: "";
position: absolute;
width: 1px;
height: calc(100% - 12px);
left: 20px;
top: 0;
border-left: 1px dotted #c3c5c8;
}
.item ul {
padding-left: 2em;
}
.content {
padding-left: 4px;
transition: all 0.2s linear;
&:hover {
background: #c3c5c8;
}
}
.spacing {
display: inline-block;
width: 18.5px;
height: 1em;
}
.icon-size {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
}
.expend-icon {
background: url("../assets/Plus.png") no-repeat center;
background-size: cover;
width: 9px;
height: 9px;
}
.reduce-icon {
background: url("../assets/minus.png") no-repeat center;
background-size: cover;
width: 9px;
height: 9px;
}
.ant-dropdown-menu {
width: 180px;
background: #353b44;
li {
color: #fff;
padding: 2px 10px;
&:hover {
background: rgb(13, 89, 175);
}
}
}
</style>引用区域 views/home.vue
<template>
<div class="home">
<tree :list="line" />
</div>
</template>
<script>
import tree from "@/components/leftTree.vue";
export default {
name: "Home",
components: {
tree,
},
data() {
return {
line: [
{
title: "Project",
type: 1,
key: "1",
icon: "file",
children: [
{
title: "index.vim",
key: "1-1",
type: 3,
icon: "vim",
},
],
},
{
title: "Menu",
type: 1,
key: "2",
icon: "file",
},
{
title: "Components",
type: 1,
key: "3",
icon: "file",
children: [
{
title: "Index",
type: 2,
key: "3-1",
icon: "file",
children: [
{
title: "index.vue",
type: 3,
key: "3-1-1",
icon: "vue",
},
{
title: "index.react",
type: 3,
key: "3-1-2",
icon: "react",
},
{
title: "js",
type: 2,
key: "3-1-3",
icon: "file",
children: [
{
title: "index.js",
type: 3,
key: "3-1-1-1-1",
icon: "js",
},
],
},
{
title: "index.sass",
type: 3,
key: "3-1-4",
icon: "sass",
},
{
title: "index.less",
type: 3,
key: "3-1-5",
icon: "less",
},
],
},
{
title: "index.php",
type: 3,
key: "3-2",
icon: "php",
},
],
},
{
title: "node_modules",
type: 1,
key: "4",
icon: "file",
children: [
{
title: "index.java",
key: "4-1",
type: 3,
icon: "java",
},
{
title: "index.go",
key: "4-2",
type: 3,
icon: "go",
},
{
title: "index.py",
key: "4-3",
type: 3,
icon: "py",
},
{
title: "index.c",
key: "4-4",
type: 3,
icon: "c++",
},
{
title: "README.md",
key: "4-5",
type: 3,
icon: "markdown",
},
],
},
],
};
},
};
</script>ps: 本人是前端小白，发帖只是为了做笔记，代码可能有很多的优化空间，另外也希望可以帮助到其他有需要的朋友
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
electron-vite工具打包后如何通过内置配置文件动态修改接口地址
使用electron-vite 工具开发项目打包完后每次要改接口地址都要重新打包,对于多环境切换或者频繁变更接口地址就显得麻烦,这篇文章主要介绍了electron-vite工具打包后通过内置配置文件动态修改接口地址实现方法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue3解构赋值失去响应式引发的问题思考，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
这篇文章主要为大家详细介绍了vue路由嵌套的SPA实现步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
详解Vue + Vuex 如何使用 vm.$nextTick
这篇文章主要介绍了详解Vue + Vuex 如何使用 vm.$nextTick，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
本文主要介绍了Vue3 JSX解释器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue中data和props的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习吧2024-01-01
这篇文章主要为大家介绍了vue封装动态表格方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue项目记录锁定和解锁功能实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论