vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue2与Vue3利用install自定义全局确认框组件

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

作者：胡小末、

这篇文章主要介绍了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中的消息通知嘿嘿

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文