vue3封装全局方法

MYmayue2025-05-04 19:59

场景：各个模块详情中存在附件列表数据，需要再每个中添加一个预览附件的方法，是后期提出的需求，所以要在每个模块中进行添加，就去将预览方法封装一下。

将公共方法封装在utils下

utils/filePreview.ts

复制代码

import router from '@/router'; // 引入路由实例

/**
 * 文件预览公共方法
 * @param {Object} row - 当前文件数据
 */
export function filePreview(row) {
  localStorage.setItem('filedata', JSON.stringify(row)); // 将文件数据存储到 localStorage 中
  const url = `${window.location.origin}${router.options.base || ''}/filePreview`; // 构造跳转 URL
  const link = document.createElement('a'); // 创建 a 标签
  link.href = url;
  link.target = '_blank'; // 新窗口打开
  link.click(); // 触发点击事件
}

然后再main.ts中进行引用注册

import App from './App.vue'

import {filePreview} from '@/utils/filePreview';

const app = createApp(App)

app.config.globalProperties.$filePreview = filePreview;

使用方法

<el-button

size="small"

type="primary"

@click="$filePreview(scope.row)"

>

预览

</el-button>