您现在的位置是：网站首页> 编程资料编程资料

VUE3+TS递归组件实现TreeList设计实例详解_vue.js_

2023-05-24 281人已围观

简介 VUE3+TS递归组件实现TreeList设计实例详解_vue.js_

前言

乘着活动，水一篇

虽然是标题党，但是不代表咱们的内容不真诚，如果对您各位有用，请不要吝啬您的小手，赞一赞！

今天和大家探讨的问题是，怎样设计一个类似vscode目录系统，也就是个treeList

不着急，您且听我慢慢道来

功能分析

我们这个目录系统的设计，由于我司乃vue为主栈，我们就使用vue3为例开发 ,在此感谢祖师爷尤大，让我等小民有口饭吃

功能如下：

1、插件式开发
2、支持拖拽功能
3、支持展开收起
4、支持目录名修改
5、目录支持增删改查
6、使用vue3开发
7、支持名字重复验证
8、支持完整事件

数据结构

一个目录结构，在数据结构上的表示为一个树，表示如下

export const list = [ { id: 1, isFolder: true, title: 'src', pid: null, fileNameArr: ['src', 'dist', 'package.json', 'README.md'], children: [ { id: 7, pid: 1, isFolder: false, fileNameArr: ['index.js', 'index.vue'], title: 'index.js' }, { id: 8, pid: 1, isFolder: false, fileNameArr: ['index.js', 'index.vue'], title: 'index.vue' } ] }, { id: 2, isFolder: true, title: 'dist', pid: null, fileNameArr: ['src', 'dist', 'package.json', 'README.md'], children: [ { id: 5, pid: 2, isFolder: false, fileNameArr: ['index.html', 'index.js'], title: 'index.html' }, { id: 6, pid: 2, isFolder: false, fileNameArr: ['index.html', 'index.js'], title: 'index.js' }, ] }, { id: 3, pid: null, title: 'package.json', fileNameArr: ['src', 'dist', 'package.json', 'README.md'], isFolder: false }, { id: 4, pid: null, title: 'README.md', fileNameArr: ['src', 'dist', 'package.json', 'README.md'], isFolder: false } ]

此处我们需要注意几个问题，为了方便后期操作，我们需要确保几个字段 isFolder 是否是文件目录

fileNameArr 同层级目录名（为了防止新增名字重复）pid 建立父子关系的pid

在一般情况下后端存储的数据可能是一个数组，

const list = [ { id: 1, isFolder: true, title: 'src', pid: null, fileNameArr: ['src', 'dist', 'package.json', 'README.md'], }, { id: 7, pid: 1, isFolder: false, fileNameArr: ['index.js', 'index.vue'], title: 'index.js' }, { id: 8, pid: 1, isFolder: false, fileNameArr: ['index.js', 'index.vue'], title: 'index.vue' }, { id: 2, isFolder: true, title: 'dist', pid: null, fileNameArr: ['src', 'dist', 'package.json', 'README.md'], }, { id: 5, pid: 2, isFolder: false, fileNameArr: ['index.html', 'index.js'], title: 'index.html' }, { id: 6, pid: 2, isFolder: false, fileNameArr: ['index.html', 'index.js'], title: 'index.js' }, { id: 3, pid: null, title: 'package.json', fileNameArr: ['src', 'dist', 'package.json', 'README.md'], isFolder: false }, { id: 4, pid: null, title: 'README.md', fileNameArr: ['src', 'dist', 'package.json', 'README.md'], isFolder: false } ]

我们需要将数组装成tree,此时祭出经典算法

function list2tree(list) { list.forEach(child => { const pid = child.pid if (pid) { list.forEach(parent => { if (parent.id === pid) { parent.children = parent.children || [] parent.children.push(child) } }) } }) return list.filter(n => !n.pid) }

实现方式

本质上来说，他是一个逐级递归的分层的数据，并且每一层的数据和格式都大致相当，只是细节的不同，我们就可以使用vue的递归组件，来解决问题

这就符合关注度分离的原则我们只关心当前这一层的内容，剩下的层级通过递归来实现代码如下：

到这里，骨架算是搭建好了，效果如下：

接下来，就可以畅通无阻的实现功能了

插件式开发

先说最重要的一点，如果在面试环境中也是你需要表达的最多的一点，你说的越花哨，你就越能唬住面试官

所谓插件式开发，就是提供数据，插件提供功能

其中有几个关键的点，务必需要表达清楚，（忽悠的越多，您啊可能就工资越高）

1、插件如何注册
2、插件需要设计那些事件
3、插件需要传入那些值，从而实现更大的灵活性
4、插件能包揽那些功能

我们一个个来解析

插件如何注册

对于vue 来说，插件套路都一样，支持全局注册，和局部注册

// index.ts import fileSystem from './fileSystem.vue'; // 在install中注册组件 function install(app) { app.component('fileSystem', fileSystem) } export { fileSystem } export default { install } // 在使用的时候 import fileSystem from './components/index' // 利用use方法俩完成全局组件注册，这也是现在的插件通用套路 createApp(App).use(fileSystem).mount('#app')

插件需要设计那些事件

按照理论来说，你的每一步操作，其实都需要有一个事件抛出，就那我们当前来说

点击事件、拖拽事件、添加文件事件、拖拽事件、删除文件事件、修改文件事件

插件需要传入那些值

从目前的需求来看，我们只需要传入四个参数

1、 treelist数据字段，这个是必须的list
2、是否支持拖拽 draggable
3、是否支持修改isEdit
4、选中内容 selected
5、插槽内容

插槽内容

之所以需要插槽内容，是由于我们的图标不是固定，为了保证当前的目录的通用性

所以图标必须要放在插槽中，让用户自己定制

于是我们制定了两个具名插槽，来分别承载，操作按钮，和图标，他就变成这样了

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：Vue echarts画甘特图流程详细讲解_vue.js_

下一篇：Vue关于对象直接赋值的坑及解决_vue.js_