file-view3
v1.0.2
Published
[English Documentation](./README-en.md)
Downloads
0
Readme
file-view3 文件夹预览 vue3插件
示例
查看 文件夹预览 插件。
安装
npm install file-view3
使用
注册到编辑器
// main.js
import fileView3 from 'file-view3'
import 'file-view3/file-view3.css'
// 注册。
createApp(App).use(fileView3).mount('#app')
组件内的使用
// App.vue
<template>
<fileView3
:files="files"
:optionsComponent="optionsComponent"
:contextMenuItem="contextMenuItem"
/>
</template>
<script>
export default {
name: 'App',
data(){
return {
files: [
{
id: 1,
url: "",
name: "一级",
children: [
{
id: 4,
url: "",
name: "二级 1-1",
children: [
{
id: 9,
url: "",
name: "三级 1-1-1",
children: [
{
id: 11,
url: "",
type: "doc",
name: "三级 1-1-1",
},
{
id: 12,
url: "",
type: "word",
name: "三级 1-1-2",
},
],
},
{
id: 10,
url: "",
type: "png",
name: "三级 1-1-2",
},
],
},
],
},
],
optionsComponent: {
zIndex: 3,
minWidth: 200,
},
contextMenuItem: [
{
label: "下载",
action: (item) => {
alert(`下载${JSON.stringify(item)}`);
}
},
{
label: "压缩",
action: (item) => {
this.compress(item)
}
}
]
}
},
methods: {
compress(item) {
alert(`压缩${JSON.stringify(item)}`);
}
},
}
</script>
配置
编辑器配置
// 文件树
files: [
{
id: 1, //必传
url: "",
name: "一级", //必传
children: [
{
id: 4,
url: "",
name: "二级 1-1",
children: [
{
id: 11,
url: "",
type: "doc", // 文件类型(必传)只有children为空的时候才会采用
name: "三级 1-1-1",
}
]
},
],
},
...
],
// 右键上下文菜单
optionsComponent: {
zIndex: 3, //层级 默认:3
minWidth: 200, //宽度 默认:200(单位:px)
},
// 右键上下文菜单
contextMenuItem: [
{
label: "下载", // 名字(必传)
action: (item) => { // 回调(必传)
alert(`下载${JSON.stringify(item)}`);
}
},
{
label: "压缩",
action: (item) => {
this.compress(item)
}
}
]