vue封装全局提示组件

由于现有组件的提示框样式无法满足UI的要求，所以自己封装一个全局提示框,
效果如下

1.首先写一个vue组件

<template>
      <!-- 全局提示框 -->
      <transition >
          <div v-show="visible" class="myNotifyComponent">
             <div class="msg">{{message}}</div>
          </div>
      </transition>
     
  
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      message: "",
    };
  }
};
</script>
<style lang="less" scoped>
.myNotifyComponent{
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 9999;
    min-width: 220px;
    max-width: 700px;
    height: 82px;
    line-height: 82px;
    border-radius: 99999px;
    padding: 0 20px;
    white-space: nowrap;
    background-color: @notify;
    text-align: center;
    color:#fff ;
    font-size: 26px;
}
   //过渡动画
    .v-enter, .v-leave-to {
       opacity: 0;
       transform: translate(-50%,-68px)
    }
    .v-enter-active, .v-leave-active {
       transition: all .5s
    }

</style>

2.实现动态加载组件

import myNotifyComponent from './index.vue'

const myNotify = {};

// 注册myNotify
myNotify.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    const myNotifyConstructor = Vue.extend(myNotifyComponent)
    // 生成一个该子类的实例
    const instance = new myNotifyConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个弹出组件的方法，接收两个参数:要显示的文本 和 显示时间
    Vue.prototype.$myNotify = (msg, duration = 1500) => {
        instance.message = msg;
        instance.visible = true;

        setTimeout(() => {
            instance.visible = false;
        }, duration);
    }
}

export default myNotify

3.在入口文件main.js中引入使用

import myNotify from '@/components/myNotify/myNotify'
Vue.use(myNotify)

4.使用

this.$myNotify("登录成功")