实现一个文件选择组件

前言花了一段时间实现了一个文件选择插件，使用广度优先和深度优先搜索算法，支持无限层级的文件夹嵌套。已经开源打包上传到npm。本文将把这个插件分享给大家。欢迎有兴趣的开发者阅读本文。插件安装yarnaddfile-folder-selector#ornpminstallfile-folder-selector--saveplug-inuse在需要使用该插件的业务代码中导入插件。即可在模板中。完成以上步骤后，启动项目即可看到效果如下图。效果图参数说明插件接收5个可选参数：fileData文件树形结构数据标题文件名，值为字符串类型id文件id，值为字符串类型文件类型，值为“文件”或“文件夹”imgSrc文件图片address（可选参数），值为字符串类型childData子文件数据（可选参数），值为数组类型，如果type为“folder”，则传入该参数，数组中每一项的类型为该类型文件数据。defaultFolderImage默认文件夹图标，值为字符串类型defaultFileImage默认文件图标，值为字符串类型defaultSearchImage默认搜索图标，值为字符串类型defaultFolderPathImage默认文件夹路径图标，值为字符串类型注：插件默认图标替换图片为svg格式不支持。插件的fileData参数请参考源码中的FileConfig.json文件。插件提供了一个回调函数：getSelectedFile来获取选中的文件，它有一个参数selectedArray，它的值为arraytype，数组中每一项的类型为：{title:string;编号：字符串；type:string}具体用法请参考源码中的file-select-test.vue文件。