Vue2与Vue3中利用install自定义全局确认框组件编写

众所周知，vue.js框架在提供丰富的插件的前提下，还提供了自定义组件的方式。

在Vue2中使用时可以直接引用Vue实例中的extends方法来生成一个新的未挂载组件，在需要的时候再挂载显示即可。而Vue3中取消了extends的方法，我们没法使用这一方式来实现。所以在升级到Vue3后这一组件也是闲置了比较长一段时间。这阵子空下来查阅资料后，找到了相应的解决方法。

一、Vue2中使用install方法注册全局组件

1.新建vue-cli项目，这个作为入门内容在此不过多赘述。

2.在根目录新建plugin文件夹，打开后新建message文件夹，在此文件夹中新建message.vue和index.js文件，结构目录如图所示。

文件结构（忽略box哈）

3.在box.vue中添加代码，跟平常添加组件类似，这里我们添加的是一个通知信息的内容。

<template>
  <transition name="slide-top">
    <section id="message" v-if="msgOueue.length > 0">
      <transition-group name="slide-top">
        <div
          class="message"
          v-for="item in msgOueue"
          :key="item.uid"
          :style="
            'color:' +
            item.config.color +
            ';background:' +
            item.config.background +
            ';border:1px solid ' +
            item.config.borderColor +
            ';'
          "
        >
          <span class="message-icons" :class="item.config.icon"></span>
          <div class="messagebox">{{ item.config.content }}</div>
        </div>
      </transition-group>
    </section>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      msgOueue: [],
      config: {
        uid: "",
        content: "内容", // 内容
        background: "#909399",
        color: "#303133",
        borderColor: "#303133",
        icon: "el-icon-info",
      },
    };
  },
  methods: {
    // 关闭方法
    onClose() {
      this.msgOueue.shift();
      this.type = 0;
    },
  },
};
</script>

<style scoped>
#message {
  width: 60rem;
  height: 5rem;
  position: absolute;
  top: 5rem;
  left: 30rem;
}

.message {
  width: 56rem;
  height: 3rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-icons {
  display: inline-block;
  font-size: 2rem;
}

.messagebox {
  width: 100%;
  height: 100%;
  display: inline-block;
  margin-left: 2rem;
  font-size: 1.5rem;
  line-height: 3rem;
}

.slide-top-enter-active,
.slide-top-leave-active {
  will-change: transform;
  transition: all 0.8s;
}

.slide-top-enter {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100%);
  height: 0;
  margin-bottom: 0;
  padding: 0;
  width: 0;
}

.slide-top-leave-to {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-100%);
  height: 0;
  margin-bottom: 0;
  padding: 0;
  width: 0;
}
</style>

4.在index.js中添加以下代码

import MESSage from "./message";

var counts = 10;

export default {

  install (Vue) {
    const MESSage_EXTEND = Vue.extend(MESSage);
    const MESSage_CREATE_EL = new MESSage_EXTEND({
      el: document.createElement("div"),
    });
    document.body.appendChild(MESSage_CREATE_EL.$el);

    const PUBLIC_FN = {

      hexToRgb (hex, opacity = 1) {
        return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5))
          + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ') ';
      },

      success (content) {
        const UID = String(counts)
        var config = {}

        config.uid = UID;
        config.color = "#67C23A";
        config.background = this.hexToRgb("#e1f3d8");
        config.icon = "el-icon-success";
        config.borderColor = "#67C23A"
        config.content = content;

        this.show(config)
      },

      error (content) {

        var config = {}

        const UID = String(counts)
        config.uid = UID;
        config.color = "#F56C6C";
        config.background = this.hexToRgb("#fde2e2");
        config.icon = "el-icon-error";
        config.content = content;
        config.borderColor = "#F56C6C"

        this.show(config)
      },

      warning (content) {
        var config = {}
        const UID = String(counts)
        config.uid = UID;
        config.color = "#E6A23C";
        config.background = this.hexToRgb("#ffdaa4");
        config.icon = "el-icon-warning";
        config.content = content;
        config.borderColor = "#E6A23C"

        this.show(config)
      },

      normal (content) {
        var config = {}
        const UID = String(counts)
        config.uid = UID;
        config.color = "#303133";
        config.background = this.hexToRgb("#909399");
        config.icon = "el-icon-info";
        config.content = content;
        config.borderColor = "#303133"

        this.show(config)
      },

      self (content, color = "#303133", background = "#909399", icon = "el-icon-info", bgop = 1) {
        var config = {}
        config.show = true;
        config.color = color;
        config.background = this.hexToRgb(background, bgop);
        config.icon = icon;
        config.content = content;
        this.show(config)
      },

      show (config) {
        const UID = String(counts)
        MESSage_CREATE_EL.uid = UID;

        if (MESSage_CREATE_EL.msgOueue.length > 5) {
          MESSage_CREATE_EL.msgOueue.shift()
        }

        console.log(config)

        counts++;
        MESSage_CREATE_EL.msgOueue.push({ uid: counts, config: config });

        setTimeout(() => {
          MESSage_CREATE_EL.onClose();
        }, 3000)


      },
    };

    Vue.prototype.$message = PUBLIC_FN;
  },
};

4.在main.js中引入并使用Vue.use方法加载到全局，即可在全局调用，根据不同的调用方法显示不同的通知栏如下：

 二、Vue3中使用install方法注册全局组件

前文说到Vue3取消了extends方法，意味着install无法使用Vue2这一方式来进行自定义组件挂载。查阅资料可以知道Vue3新增了createApp方法来创建内容，那么我们利用这个能否实现这一未挂载组件的功能呢？

1.按上一个步骤新建文件，message.vue的内容也不需要进行改变。

2.将index.js的代码改为以下代码：

import { createApp } from "vue";
import MESSage from "./message";

var counts = 10;

export default {

    install (app) {
        // 1.实例化并绑定组件
        const MESSage_EXTEND = createApp(MESSage);
        const MESSage_CREATE_EL = MESSage_EXTEND.mount(
            document.createElement("div"),
        );


        document.body.appendChild(MESSage_CREATE_EL.$el);


        // 3.调用显示的方法
        const PUBLIC_FN = {

            hexToRgb (hex, opacity = 1) {
                return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5))
                    + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ') ';
            },

            success (content) {
                const UID = String(counts)
                var config = {}

                config.uid = UID;
                config.color = "#67C23A";
                config.background = this.hexToRgb("#e1f3d8");
                config.icon = "el-icon-success";
                config.borderColor = "#67C23A"
                config.content = content;

                this.show(config)
            },

            error (content) {

                var config = {}

                const UID = String(counts)
                config.uid = UID;
                config.color = "#F56C6C";
                config.background = this.hexToRgb("#fde2e2");
                config.icon = "el-icon-error";
                config.content = content;
                config.borderColor = "#F56C6C"

                this.show(config)
            },

            warning (content) {
                var config = {}
                const UID = String(counts)
                config.uid = UID;
                config.color = "#E6A23C";
                config.background = this.hexToRgb("#ffdaa4");
                config.icon = "el-icon-warning";
                config.content = content;
                config.borderColor = "#E6A23C"

                this.show(config)
            },

            normal (content) {
                var config = {}
                const UID = String(counts)
                config.uid = UID;
                config.color = "#303133";
                config.background = this.hexToRgb("#909399");
                config.icon = "el-icon-info";
                config.content = content;
                config.borderColor = "#303133"

                this.show(config)
            },

            self (content, color = "#303133", background = "#909399", icon = "el-icon-info", bgop = 1) {
                var config = {}
                config.show = true;
                config.color = color;
                config.background = this.hexToRgb(background, bgop);
                config.icon = icon;
                config.content = content;
                this.show(config)
            },

            show (config) {
                const UID = String(counts)
                MESSage_CREATE_EL.uid = UID;

                if (MESSage_CREATE_EL.msgOueue.length > 5) {
                    MESSage_CREATE_EL.msgOueue.shift()
                }

                console.log(config)

                counts++;
                MESSage_CREATE_EL.msgOueue.push({ uid: counts, config: config });

                setTimeout(() => {
                    MESSage_CREATE_EL.onClose();
                }, 3000)


            },
        };

        // 4.挂载全局
        app.config.globalProperties.$message = PUBLIC_FN;
    },
};

在main.js中使用use方法引入全局使用

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

import message from './utils/plugin/message';

const app = createApp(App);

app.use(message)

app.mount("#app");

在测试案例中使用以下代码测试

this.$message.success("成功");

 是的没错，我们在模仿element-ui中的消息通知嘿嘿

参考资料：

vue.js教程