让我们一起实现一个文件选择组件

前言

花了点时间利用广度与深度优先搜索算法实现了一个文件选择插件，支持无限层次的文件夹嵌套，已开源并打包上传到了npm。

建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联建站专业提供成都网站制作、成都网站设计,网页设计,网站制作(企业站、成都响应式网站建设、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!

本文将跟大家分享一下这个插件，欢迎各位感兴趣的开发者阅读本文。

插件安装

yarn add file-folder-selector
# or
npm install file-folder-selector --save

插件使用

在你需要使用此插件的业务代码中导入插件。

在template中使用即可。

完成上述步骤后，启动项目即可看到如下所示的效果。

效果图

参数说明

插件接收5个可选参数：

• fileData 文件树结构数据

title 文件名, 值为string类型

id 文件id, 值为string类型

type 文件类型, 值为"file"或"folder"

imgSrc 文件图片地址（可选参数），值为string类型

childData 子文件数据（可选参数），值为array类型，如果type为"folder"，则传此参数，数组中的每一项类型就为fileData的类型。

• defaultFolderImage 默认的文件夹图标，值为string类型
• defaultFileImage 默认的文件图标，值为string类型
• defaultSearchImage 默认的搜索图标，值为string类型
• defaultFolderPathImage 默认的文件夹路径图标，值为string类型

注意：插件默认的图标更换不支持svg格式的图片，插件的fileData参数可参考源码中的FileConfig.json文件。

插件提供了1个回调函数：

• getSelectedFile 获取已选择的文件，它有1个参数selectedArray，它值为array​类型，数组中的每一项类型为：{title: string; id: string; type: string }

具体的使用方法可以参考源码中的 file-select-test.vue 文件。

网页名称：让我们一起实现一个文件选择组件
本文路径：http://www.csdahua.cn/qtweb/news28/233478.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网