Vue3 文件

支持图片、代码、记事本、文档、音频、视频格式

使用

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

<div ref="testRef" class="test">
    <n-button @click="onClick">点击打开</n-button>
</div>

import { ref } from 'vue';
import { NButton } from 'naive-ui';
import MVueFile from 'm-vue-file';

//生产环境配置:设置代码解析器路径
if(import.meta.env.MODE === 'production') (window as any).workUrl = '';

const testRef = ref();

const onClick = () => MVueFile({ value: 'https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg', suffix: 'jpg', container: testRef.value, name: '我的图片', close: () => console.log('close') });

vite.config配置

import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: ['./node_modules/m-vue-file/worker'], dest: '' }
      ]
    })
  ]
})

属性

value: string，'文件地址'
suffix: string，'后缀名称'
container: Dom，'挂载Dom'
name: string，'文件名称'
edit: boolen，'是否是编辑模式(图片无效)'
saveType: string，'保存按钮样式'
saveText: string，'保存按钮文字'
close: function，'关闭回调方法'
save: function，'保存回调方法'
callbackUrl: string，'文档回调地址'
documentServerUrl: string，'文档服务地址'

方法

import { getType } from 'm-vue-file';
getType('文件后缀'); //返回空则表示不支持该类型