Vue学习——Vue3自定义插件(组件)

我们要封装一个弹出框插件，它的效果是这样的：

第一步：在项目中创建存放自定义插件的文件夹

并在文件夹中新建.vue组件和一个index.js文件，.vue文件作为自定义插件

第二步：在index.js文件中编写下面的代码

// 自写插件

import Toast from './Toast'
import { createApp } from 'vue'

const obj = {}

// 当main.js执行到.use(toast)代码(安装插件)时，会执行obj的install函数
obj.install = (app) => {

    /* Vue3的自定义插件 */
    // 1.实例化并绑定组件
    const toastConstructor = createApp(Toast);
    const instance = toastConstructor.mount(document.createElement('div'));

    // 2.将挂载的Node添加到body中
    document.body.appendChild(instance.$el);

    // 3.定义全局($toast即是此插件的名称)
    app.config.globalProperties.$toast = instance;
}

export default obj

Toast.vue文件中的代码：

<template>
  <div class="toast" v-show="isShow"> 
      <p>{{message}}</p>
  </div>
</template>

<script>
export default {
    data(){
        return {
            message:'',
            isShow:false
        }
    },
    methods:{
        show(message='默认文本',duration=1000){
            this.message = message;
            this.isShow = true;

            // 指定时间后弹框消失
            setTimeout(() => {
                this.isShow = false;
            }, duration);
        }
    }
}
</script>

<style>
    .toast{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 140px;
        height: 40px;
        background-color: black;
        opacity: .7;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        color: white;
        z-index: 100;
    }
</style>

第三步：在项目的main.js文件中安装此插件

提示：当Vue执行到use(toast)时，会跳转到index.js中执行obj对象的install函数，在此函数里就可以做声明插件的操作了。

第四步：使用插件

封装得有多狼狈，使用起来就有多舒服。这里我们使用插件只需要一句代码即可。

this.$toast.show('添加到购物车成功',1500);

效果：

喜欢的朋友可以点赞加收藏哦，谢谢！