vue3 + TS 自定义插件-全局message提示插件示例

本文记录 Vue3 + ts 实现自定义一个全局插件，用于进行 message 消息提示，所谓全局插件即挂载到 vue 实例上，在 App 的任一子组件中均可通过 app 的实例调用该方法。消息提示功能只是示例主要是记录 Vue3 自定义插件功能的写法。

文件结构：

src/components/Toast/index.vue 文件用于搭建和渲染消息在页面上的显示效果，比如需要显示在页面的哪个位置、字体、颜色、显示和隐藏的动画效果等；

src/components/Toast/index.ts 文件用于实现将消息的显示/隐藏等方法全局挂载到 app 实例上（注：对象写法默认需要导出一个 install() 方法），这样在 main.ts 中导入并注册该组件即可；

主要代码

index.vue 文件

<!-- 封装消息提示插件 -->
<template>
  <Transition enter-active-class="animate__animated animate__bounceInRight"
    leave-active-class="animate__animated animate__bounceOutRight">
    <div v-if="isShow" class="message">{{ tipText }}</div>
  </Transition>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
let isShow = ref<boolean>(false)
let tipText = ref<string | number>('默认提示内容')
const show = (str: string | number, time: number = 3000) => {
  tipText.value = str
  isShow.value = true
  // 2 秒后自动关闭
  setTimeout(() => {
    isShow.value = false
  }, time);
}
const hide = () => isShow.value = false
// 将组件内部的方法导出，方便外部访问
defineExpose({
  show,
  hide
})
</script>

<style lang='less' scoped>
.message {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-radius: 5px;
  background-color: rgba(200, 217, 217, 0.5);
  position: fixed;
  top: 50px;
  right: 100px;
}
</style>

index.ts 文件

import { App, createVNode, VNode, render } from 'vue'
import Toast from './index.vue'

export default {
  install(app: App) {
    // 将组件转换为虚拟DOM
    const Vnode: VNode = createVNode(Toast)
    // 将虚拟DOM挂载到页面节点上
    render(Vnode, document.body)
    // 将插件的主要方法挂载到 app.config.globalProperties 上，这里的 $toast 是自定义的
    app.config.globalProperties.$toast = {
      // 这里仅挂载了一个 show 方法到 $toast 上
      show(str: string | number, time?: number) {
        Vnode.component?.exposed?.show(str, time)
      },
    }
  },
}

然后在 main.ts 中导入并注册该插件

// 注册插件
import Toast from './components/Toast'
const app = createApp(App)

// 只要是插件都需要进行注册，都是通过 app.use() 进行注册的
app.use(Toast)

使用插件

进行到此我们的自定义插件就已经可以在任意 App 的子组件中使用了，如：

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 使用自定义的全局消息提示插件
instance?.proxy?.$toast.show('this is default message')

效果图

 

扩充声明文件 

注：以上虽然全局的消息插件是能使用了，但是因为 $toast 缺乏类型声明文件所以会报错而且其内部的方法、变量等成员均没有智能提示，所以我们还需要在 main.ts 文件中对 $toast 的成员类型进行声明：将 main.ts 文件中关于注册该自定义插件的代码进行如下更新：

// 注册插件
import Toast from './components/Toast'
const app = createApp(App)

type Toast = {
  show: <T>(str: string | number, time?: number) => void
}
// 编写自定义插件的声明文件，防止报错，声明后也会有智能提示
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $toast: Toast
  }
}

// 只要是插件都需要进行注册，都是通过 app.use() 进行注册的
app.use(Toast)

注：更新后如果页面中还是报错（爆红色提醒），重启服务即可，且在页面上访问 $toast 的内部成员也会有智能提示，比如 show() 方法，且该方法需要几个参数、参数需要什么类型都会有提示。至此我们 Vue3 + ts 的自定义插件就封装完成啦！