file-view3 v1.0.2

file-view3 文件夹预览 vue3插件

English Documentation

示例

查看 文件夹预览 插件。

安装

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)
          }
        }
    ]