vue3.0的全局方法配置

vue3.0的全局方法配置

1.方法写入全局

// main.js文件
import { createApp,createVNode} from "vue";

import App from "./App.vue";
// ant-design-vue组件
import { message, Modal } from "ant-design-vue";
// 二次封装的axios
import request from "./utils/request.js";

//message提示

const tips=(type,info)=>{
    switch (type) {
        case "success":
          message.success(info);
          break;
        case "error":
          message.error(info);
          break;
     }
}
//提示框

const showConfirm = (info, ok, cancel) => {
  Modal.confirm({
    title: `您确认删除${info.label}吗?`,
    icon: createVNode(ExclamationCircleOutlined),
    // content: createVNode(
    //   "div",
    //   {
    //     style: "color:red;",
    //   },
    //   "Some descriptions"
    // ),
    onOk() {
      ok();
    },
    onCancel() {
      cancel();
    },
    class: "test",
  });
};

const app=createApp(APP)
// 将方法写入全局 $Tips $modal $http

app.config.globalProperties.$Tips = tips;

app.config.globalProperties.$modal = showConfirm;

app.config.globalProperties.$http = request;

2.使用

// 任意组件内
import {getCurrebtInstance} from "vue";

const proxy=getCurrebtInstance();

proxy.$Tips("success","提示内容")；
// 二次封装的axios下的get方法
proxy.$http.get("/api/~","参数")
// 全局的确认对话框 1.数据信息 2.确认回调 3.取消回调
proxy.$modal(obj,ok,cancel)

这只是全局方法的简单使用，具体可根据有项目需要自行添加全局方法，另外本人只是一个卑微的CV工程师，如果文章有什么错误的地方，希望各位大佬不吝赐教