Vue3之全局引入Element UI的ElMessage

// src/plugins/elementPlus/index.ts

import type { App } from 'vue'

// 需要全局引入一些组件，如ElScrollbar，不然一些下拉项样式有问题
import { ElLoading, ElScrollbar, ElMessage } from 'element-plus'

const plugins = [ElLoading]

const components = [ElScrollbar]

export const setupElementPlus = (app: App<Element>) => {
  plugins.forEach((plugin) => {
    app.use(plugin)
  })

  components.forEach((component) => {
    app.component(component.name, component)
  })

  const ElMessageCfg = { duration: 2000, customClass: 'globalElMessageStyle' }
  app.config.globalProperties.$ElMessage = (msg) => {
    return ElMessage({ message: msg, ...ElMessageCfg })
  }
  app.config.globalProperties.$ElMessage.success = (msg) => {
    return ElMessage.success({ message: msg, ...ElMessageCfg })
  }
  app.config.globalProperties.$ElMessage.warning = (msg) => {
    return ElMessage.warning({ message: msg, ...ElMessageCfg })
  }
  app.config.globalProperties.$ElMessage.info = (msg) => {
    return ElMessage.info({ message: msg, ...ElMessageCfg })
  }
  app.config.globalProperties.$ElMessage.error = (msg) => {
    return ElMessage.error({ message: msg, ...ElMessageCfg })
  }
}

// styles/component.less

.globalElMessageStyle {
  z-index: 3000 !important;
}

// styles/index.less

@import './component.less';

// src/main.ts

// 引入element-plus
import { setupElementPlus } from '@/plugins/elementPlus'

// 引入全局样式
import '@/styles/index.less'

import { createApp } from 'vue'

import App from './App.vue'

// 创建实例
const setupAll = async () => {
  const app = createApp(App)

  setupElementPlus(app)
}

setupAll()