Vue-electron-folder NPM

vue-electron-folder

vue-electron-folder 是一个适用于vue-electron应用的文件夹管理组件

特性

树形展示文件夹列表
支持不同路径下的多个文件夹管理
支持单选/多选/拖拽操作
支持过滤/搜索文件
支持自定义文件图标
支持文件移动 TODO

演示

Demo

安装

$   npm install vue-electron-folder --save

使用

引入模块

import Folder from 'vue-electron-folder'

注册

全局注册

Vue.use(Folder)

组件内注册

<script>
export default {
  components: { Folder }
}
</script>

基础用法

示例代码：

<template>
  <div class="container">
    <folder :openedFolders="openedFolders"></folder>
  <div>
</template>

<script>
import Folder from 'vue-electron-folder'

export default {
  name: 'DemoComp',
  data () {
    return {
      openedFolders: []
    }
  },
  mounted () {
    this.openedFolders.push('/your/test/folder/path')
  },
  components: { Folder }
}
</script>

<style scoped>
.container{
  height: 500px;
}
</style>

自定义文件图标

需在项目中引入自定义图标的iconfont

示例代码：

<template>
  <div class="container">
    <folder 
      :openedFolders="openedFolders"
      :icons="icons"
    >
    </folder>
  <div>
</template>

<script>
import Folder from 'vue-electron-folder'

export default {
  name: 'DemoComp',
  data () {
    return {
      openedFolders: [],
      icons: {
        '.xlsx': { name: 'iconfile-excel-fill', color: '#56B158' },
        '.docx': { name: 'iconfile-word-fill', color: '#0A84F1' },
        '.pptx': { name: 'iconfile-ppt-fill', color: '#F12E0B' },
        '.zip': { name: 'iconfile-zip-fill', color: '#C8C800' },
        '.7z': { name: 'iconfile-zip-fill', color: '#C8C800' },
        '.pdf': { name: 'iconfile-pdf-fill', color: '#EA4DCF' },
        '.png': { name: 'iconfile-image-fill', color: '#E6880E' },
        '.jpg': { name: 'iconfile-image-fill', color: '#E6880E' },
        '.md': { name: 'iconfile-markdown-fill', color: '#844DEA' },
      }
    }
  },
  mounted () {
    this.openedFolders.push('/your/test/folder/path')
  },
  components: { Folder }
}
</script>

<style scoped>
.container{
  height: 500px;
}
</style>

调试

组件中提供了简单的调试示例

npm install
npm run dev

API

属性

参数	说明	类型	可选值	默认值	示例
openedFolders	打开的文件夹数组。由外层传入，内部监听数组变更	Array	—	[]	'/home/dir1', '/home/dir2'
checkedFiles	勾选的文件	Array	—	[]	'/home/dir1/file1', '/home/dir2/file2'
includes	只显示指定的文件	Array	—	[]	'.js', '.py', '.html', '.css'
icons	自定义的文件图标	Object	—	null	{ '.md': { name: 'iconfile-markdown-fill', color: '#844DEA' } }
maxLevel	单次最多遍历的文件夹层级数	Number	—	3	-
enableClose	是否显示关闭文件夹按钮	Boolean	—	true	-
enableReload	是否显示刷新文件夹按钮	Boolean	—	true	-
enableReloadAll	是否显示刷新所有文件夹按钮	Boolean	—	true	-
multiSelection	是否启用多选功能	Boolean	—	true	-
multiSelectionBlacklist	指定某些文件只能单选	Array	—	[]	'.js', '.cpp'

事件

事件名	说明	回调参数
click	单击文件/文件夹事件	data
select	单独选中文件/文件夹事件	data
multi-select	多选事件	selected
dblclick	双击文件的事件	data
close	关闭文件夹的事件	data
drag-start	开始拖拽的事件	selectedFiles, event

插槽

作用域插槽

自定义右键打开的上下文菜单内容，参数为 { node, data }

示例：
  <folder>
    <div slot-scope="{ node, data }">
      <div>name: {{ data.label}}</div>
      <div>path: {{ data.path}}</div>
    </div>
  </folder>