vue3封装一个轻量的全局提示插件_前端框架_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

vue3封装一个轻量的全局提示插件

来源：作者：woaimoban 类型：图文教程点击次数：发布时间：2023-03-14 15:31:54

我爱模板网再做一个小项目，不想使用element plus、antd这种重量级框架，但是又觉得element plus的提示插件很美观，于是就自己动手封装了一个轻量级的，不依赖任何插件的toat提示插件。

先看下插件效果：

vue3 toast

插件npm地址：https://www.npmjs.com/package/hxz-light-toast?activeTab=readme

封装流程：

1、Vue CLI创建项目，项目名叫：hxz-light-toast

`1`	`vue create hxz-light-toast`

2、修改文件夹

将src文件夹重命名为test，用来测试插件，并且复制一份src文件夹，用来编写插件，删除src/App.vue。

3、修改package.json中的scripts如下：

1"scripts": {
2  "test": "vue-cli-service serve test/main.js",
3  "build": "vue-cli-service build --target lib --name index src/main.js"
4},

其中test脚本是配置测试demo的启动，与正常的 vue 项目启动一致，只是修改了一下路径跟脚本名。因为是开发的一个插件，打包时不能像普通vue项目一样打包成应用，而是要打包成库。Vue脚手架(Vue CLI)可以直接打包库，命令如下：

`1`	`vue-cli-service build --target lib --name myLib [entry]`

4、在src的components下新建hxz-light-toast.vue：

01<template>
02  <Transition name='fade'>
03    <div v-if="isShow" :class="['message', tipType]">{{ tipText }}</div>
04  </Transition>
05</template>
06<script setup>
07import { ref, defineExpose } from 'vue';
08const isShow = ref(false)
09const tipText = ref('默认提示内容')
10const tipType = ref('info')
11const show = (str, type = 'info', time = 2000) => {
12  tipText.value = str
13  tipType.value = type
14  isShow.value = true
15  setTimeout(() => {
16    isShow.value = false
17  }, time);
18}
19const hide = () => isShow.value = false
20defineExpose({
21  show,
22  hide
23})
24</script>
25<style scoped>
26.message {
27  background: #edf2fc url('../assets/icon-info.png') no-repeat 20px center/14px 14px;
28  color: #909399;
29  border: 1px solid #ebeef5;
30  height: 40px;
31  line-height: 38px;
32  padding: 0 20px 0 45px;
33  border-radius: 5px;
34  position: fixed;
35  top: 25px;
36  left: 50%;
37  transform: translate(-50%, 0);
38  font-size: 14px;
39  z-index: 200000;
40}
41.message.info{
42  background-color: #edf2fc;
43  background-image: url('../assets/icon-info.png');
44  color: #909399;
45  border: 1px solid #ebeef5;
46}
47.message.success{
48  background-color: #f0f9eb;
49  background-image: url('../assets/icon-success.png');
50  color: #67c23a;
51  border: 1px solid #e1f3d8;
52}
53.message.error{
54  background-color: #fef0f0;
55  background-image: url('../assets/icon-error.png');
56  color: #f56c6c;
57  border: 1px solid #fde2e2;
58}
59.message.warning{
60  background-color: #fdf6ec;
61  background-image: url('../assets/icon-warning.png');
62  color: #e6a23c;
63  border: 1px solid #faecd8;
64}
65.fade-enter-from{
66  opacity: 0;
67  transform:translate(-50%, -100px)
68}
69.fade-enter-active{
70  transition: all 500ms linear;
71}
72.fade-enter-to{
73  opacity: 1;
74  transform: translate(-50%, 0)
75}
76.fade-leave-from{
77  opacity: 1;
78  transform: translate(-50%, 0)
79}
80.fade-leave-active{
81  transition: all 500ms linear;
82}
83.fade-leave-to{
84  opacity: 0;
85  transform:translate(-50%, -100px)
86}
87</style>

5、在src/main.js导出插件：

01import { createVNode, render } from 'vue'
02import Toast from './hxz-light-toast.vue'
03export default {
04  install(app) {
05    // 将组件转换为虚拟DOM
06    const Vnode = createVNode(Toast)
07    // 将虚拟DOM挂载到页面节点上
08    render(Vnode, document.body)
09    // 将插件的主要方法挂载到 app.config.globalProperties 上，这里的 $toast 是自定义的
10    app.config.globalProperties.$toast = {
11      // 这里仅挂载了一个 show 方法到 $toast 上
12      show(str, time) {
13        Vnode.component?.exposed?.show(str, time)
14      },
15    }
16  },
17}

上面的代码解释的很清楚了，这里不再多说。

6、测试插件

在test的App.vue配置如下代码来测试插件：

01<template>
02  <div></div>
03</template>
04<script>
05export default {
06  name: 'App',
07  created() {
08    this.$toast.show('这是一条消息提示')
09  }
10}
11</script>

运行，没有问题，效果见文章开头的图片

至此，插件就封装好了。

打包发布见：编写一个vue3插件并发布它