0.1.5 • Published 4 years ago
vue-explorer-component v0.1.5
vue-explorer
基于 vue 的文件管理试图 依赖 element-ui 的 table、table-column 组件
安装
npm i --save element-ui
npm i --save vue-explorer-component
使用
import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import vueExplorer from 'vue-explorer-component'
// 或者只注册 table 和 table-column 组件也可以
Vue.use(Element)
Vue.use(vueExplorer)
注意
目前使用需要提前全局注册 el-table 和 el-table-column
element-ui table 组件有些 bug... 我尝试在 explorer 中局部注册 table 和 table-column 打包在其他项目中使用异常(注册正常,数据正常,显示异常) 原因不明
包罗万象的例子
<template>
<div>
<vue-explorer
mode="normal"
:data-arr="dataArr"
:selection="selection"
:selected-arr="selectedArr"
:action-arr="actionArr"
@clickFolder="clickFolder"
@clickFile="clickFile"
@dragMove="dragMove"/>
<vue-explorer
mode="table"
:data-arr="dataArr"
:selection="selection"
:selected-arr="selectedArr"
:action-arr="actionArr"
:other-column-arr="otherColumnArr"
@clickFolder="clickFolder"
@clickFile="clickFile"/>
</div>
</template>
<script>
export default {
data () {
return {
/**
* 文件数据,一维数组
* 每一项数据如下:
* {
* // 唯一值
* key: [String, Number],
*
* // 显示名称
* name: String,
*
* // 类型
* type: String[folder/docx/excel/image/mp3/pdf/ppt/txt/video/zip/none]
*
* // 额外数据
* data: Object
* }
**/
dataArr: [],
/**
* 是否开启选择
**/
selection: true,
/**
* 被选中的项数据集合
* 注意:
* selection 要为 true
* table 模式有引用地址的问题
* 所以要保证项对象在 dataArr 中能找到并且全等
**/
selectedArr: [],
/**
* 对于每一项的单独操作
* 右键项即可弹出操作列表
* [
* {
* label: String(显示的名字)
* handler: Function(处理函数,参数为当前项)
* }
* ]
**/
actionArr: [],
/**
* table 模式显示新的列
* normal 该 prop 无效
* 第一列选中,第二列名字
* 是必有的,可以考虑通过 css 的方式隐藏这两个固有列
* 来显示纯显示
* {
* label: String,
* key: String,
* filter: Function
* }
**/
otherColumnArr: []
}
},
methods: {
// 点击文件夹时触发
clickFolder (data) {},
// 点击文件时出发
clickFile (data) {},
// 拖拽移动时触发
// 只有拖拽到文件夹才会触发
// 注意:目前只有 normal 模式才有拖拽
dragMove (targetFolderData, selectedArr) {}
}
}
</script>