vue3 + typescript + element-plus 全局挂载message组件

6,670 阅读1分钟
//main.ts
import { ElMessage } from "element-plus";//引入message组件
import { IMessage } from "element-plus/lib/el-message/src/types";//引入类型文件


app.use(ElMessage);//在app上使用message组件

app.config.globalProperties.$message = ElMessage; //挂载到app实例上

//定义module 需要ts代码提示必须执行下方代码
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $message: IMessage; //挂载类型
  }
}

设置完成后成功代码提示。

image.png

//demo.vue
import {
  ComponentInternalInstance,
  getCurrentInstance,
} from "@vue/runtime-core";


let instance: ComponentInternalInstance | null = getCurrentInstance();//获取app实例

instance?.proxy?.$message.success('这是一条成功信息')//调用