Vue实现自定义Message

最新推荐文章于 2024-09-10 08:50:41 发布

Linzsong

最新推荐文章于 2024-09-10 08:50:41 发布

阅读量3.7k

点赞数 3

分类专栏： vue js

本文链接：https://blog.csdn.net/Linzsong/article/details/108341572

版权

本文介绍了在Vue项目中，由于体积和自定义需求，不使用element-UI的message组件，而是选择自行封装一个Vue custom-message的过程。文章详细阐述了基本原理，包括使用Vue.extend创建构造器并挂载到body，以及实现步骤，包括创建messageMain.vue组件、创建构造器并在main.js中安装到Vue实例。最后提供了GitHub和码云上的完整代码链接。

摘要由CSDN通过智能技术生成

Vue实现custom-message

效果图展示

前言

之前在项目中使用vue框架中的element-UI时，使用element-UI的弹窗非常的nice，但在最近的项目中，要求项目体积小，且高度自定义，所以不能把element-UI的message的组件引进来再改样式，于是决定自己封装一个，来满足需求。

基本原理

使用Vue.extend(options)创建一个Vue构造器，再将构造器实例化，挂载到body中

...
const MessageBox = Vue.extend(MessageMain);
...
const Message = function (options = {
   }) {
   
...
	let instance = new MessageBox({
   
        data: options
    });
    //在文档之外渲染并且随后挂载
    instance.vm = instance.$mount();
    document.body.appendChild(instance.vm.$el);
...
}

通过构造器，将组件挂载到body上

实现步骤

创建messageMain.vue组件

<template>
  <transition name="taataa">
    <div :class="['plugins-message-box',type]" v-if="visible">
      <div :class="['message-icon','iconfont',iconClass]"></div>
      <div class="message-container">{
   {
   message}}</div>
    </div>
  </transition>
</template>

<