Vue2與Vue3如何利用install自定義全局確認框組件編寫

更新時間：2024年03月12日 16:02:39 作者：胡小末、

這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認框組件編寫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue2中使用install方法注冊全局組件

1.新建vue-cli項目，這個作為入門內(nèi)容在此不過多贅述。

2.在根目錄新建plugin文件夾，打開后新建message文件夾，在此文件夾中新建message.vue和index.js文件，結(jié)構(gòu)目錄如圖所示。

文件結(jié)構(gòu)（忽略box哈）

3.在box.vue中添加代碼，跟平常添加組件類似，這里我們添加的是一個通知信息的內(nèi)容。

<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: "內(nèi)容", // 內(nèi)容
        background: "#909399",
        color: "#303133",
        borderColor: "#303133",
        icon: "el-icon-info",
      },
    };
  },
  methods: {
    // 關(guān)閉方法
    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方法加載到全局，即可在全局調(diào)用

根據(jù)不同的調(diào)用方法顯示不同的通知欄如下：

Vue3中使用install方法注冊全局組件

前文說到Vue3取消了extends方法，意味著install無法使用Vue2這一方式來進行自定義組件掛載。

查閱資料可以知道Vue3新增了createApp方法來創(chuàng)建內(nèi)容，那么我們利用這個能否實現(xiàn)這一未掛載組件的功能呢？

1.按上一個步驟新建文件，message.vue的內(nèi)容也不需要進行改變。

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.調(diào)用顯示的方法
        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");

在測試案例中使用以下代碼測試