脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue2与Vue3利用install自定义全局确认框组件

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

 更新时间：2024年03月12日 16:02:39   作者：胡小末、  
这篇文章主要介绍了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使用echarts实现折线图

    vue使用echarts实现折线图

    这篇文章主要为大家详细介绍了vue使用echarts实现折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用

    3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用

    这篇文章主要介绍了3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-02-02
  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题

    今天小编就为大家分享一篇解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Swiper在Vue2中的简单使用方法

    Swiper在Vue2中的简单使用方法

    这篇文章主要给大家介绍了关于Swiper在Vue2中的简单使用方法,swiper是一款现代化的移动端轮播组件,可以在Vue中轻松使用,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue路由切换时取消之前的所有请求操作

    vue路由切换时取消之前的所有请求操作

    这篇文章主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    在vue项目中使用Jquery-contextmenu插件的步骤讲解

    今天小编就为大家分享一篇关于在vue项目中使用Jquery-contextmenu插件的步骤讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue 页面状态保持页面间数据传输的一种方法(推荐)

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配，一种是编程式导航，接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下
    2018-11-11
  • vue实现图片上传预览功能

    vue实现图片上传预览功能

    这篇文章主要为大家详细介绍了vue实现图片上传预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue iview实现分页功能

    vue iview实现分页功能

    这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue项目使用.env文件配置全局环境变量的方法

    vue项目使用.env文件配置全局环境变量的方法

    这篇文章主要介绍了vue项目使用.env文件配置全局环境变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论