0.0.5 • Published 1 year ago
m-vue-file v0.0.5
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('文件后缀'); //返回空则表示不支持该类型