vue全局方法plugins/utils

一、在src目录下创建一个plugins文件夹

• test.ts文件存放创建的方法，index.ts用于接收所有自定义方法进行统一处理
  

二、编写自定义方法

// test.ts文件
export default {
  handleTest(val1: number, val2: number) {
    // 只是一个求和的方法
    return val1 + val2;
  },
};

三、引入到index.ts

vue对插件的安装可以分为两种方式

方式一：直接使用函数，在main.js中调用

//index.ts文件
import test from "./test";
export default function (app: any) {
  app.config.globalProperties.handleTest = test.handleTest;
}

方式二：使用对象，则必须给对象一个install属性

import test from "./test";
export default {
  install: function (app: any) {
      app.config.globalProperties.handleTest = test.handleTest;
  },
};

四、引入main.ts进行注册

//main.ts文件
import pluginsfrom "./plugins";
app.use(plugins); //使用此方法会执行方法的函数或对象的install方法

五、全局方法的使用

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
console.log(proxy.handleTest(4, 3), "@@@@###");

六、效果展示