vue 如何写一个消息通知组件$notify，简单易懂，你上你也行！

废话少说，上效果图

前言

    本人在做毕设的时候用elementui写页面的时候，觉得这个通知很有趣，可以用一个命令（this.$notify)这样子调用，很神奇。所以打算自己封装一个，以后就可以随便调用了。

第一步：创建这个通知的模板

首先，你在vue的项目里面，找个合适的位置创建一个文件夹，创建一个vue的文件以及一个js文件

代码如下

myNotify.vue

 我通过 transition 实现过渡，v-if 来决定显示类型，其他的就是一些样式了（个人觉得这样写挺冗余的，可以改进）

<template>
  <transition name="slide-fade">
    <div class="my-notify" v-if="notifyFlag">
      <div class="notify success" v-if="type=='success'">
        <div class="tip">
          <span>成功</span>
        </div>
        <div class="content"> {{content}}</div>
      </div>
      <div class="notify error" v-else-if="type=='error'">
        <div class="tip">
          <span>错误</span>
        </div>
        <div class="content">{{content}}</div>
      </div>
      <div class="notify warning" v-else-if="type=='warning'">
        <div class="tip">
          <span>警告</span>
        </div>
        <div class="content">{{content}}</div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
  transform: translateX(10px);
  opacity: 0;
}
.notify-wrap{
  
  background-color: #1AFA29;
}
.my-notify{
  margin: 10px;
  width: 350px;
}
.notify{
  position: relative;
  right: 10px;
  padding-left: 10px;
  width: 320px;
  height: 70px;
  border-radius: 4px;
  background-color:rgb(255, 244, 224);
  box-shadow: -5px 5px 12px 0 rgba(204, 204, 204, .8);
  animation: show cubic-bezier(.18,.89,.32,1.28) .4s;
}
.success{
  border-left: 10px solid #1AFA29;
}
.error{
  border-left: 10px solid #D81E06;
}
.warning{
  border-left: 10px solid #F4EA2A;
}
.notify .tip{
  height: 30px;
  margin-bottom: 5px;
  line-height: 30px;
}
.notify .tip span{
  line-height: 30px;
  font-size: 17px;
  font-weight: 600;
}
.notify .content{
  width: 320px;
  height: 30px;
  font-size: 15px;
}
@keyframes show{
  0%{
    right: -350px;
  }
  100%{
    right: 10px;
  }
}
</style>

index.js

在用element的通知的时候，我发现在他是通过在body里面插入元素来实现的，但是我觉得一个个的有点散，所以用一个div来包裹住他们，这样一来还可以不用通过js来计算高度来实现排队，反而变得更加简单。通过timeout来记时，实现停留效果，监听timeFlag的变化来决定是否消失该条通知。注册方法的作用在下面详说。

import vue from 'vue'
import myNotify from './myNotify'

// 创建vue组件实例
const notify = vue.extend(myNotify);

//添加通知节点(用来存放通知的元素)
let notifyWrap = document.createElement('div');
notifyWrap.className = "notify-wrap"
notifyWrap.style = "position: fixed; right: 0px; top: 90px; transition-duration: .5s;"
document.body.appendChild(notifyWrap);

let myMsg = {
  /**
   * 通知框
   * @content 提示内容;
   * @type 提示框类型，parameter： success，error，warning
   * @time 显示时长
   */
  notify: ({
    content, 
    type, 
    time = 1500,
  }) => {
    //创建一个存放通知的div
    const notifyDom = new notify({
      el: document.createElement('div'),
      data () {
        return {
          notifyFlag: true, // 是否显示
          time: time,//取消按钮是否显示
          content: content, // 文本内容
          type: type, // 类型
          timer: '',
          timeFlag: false,
        }
      },
      watch:{
        timeFlag(){
          if(this.timeFlag){
            this.notifyFlag = false;
            window.clearTimeout(this.timer); 
          }
        }
      },
      created(){
        this.timer = setTimeout(() => { 
          this.timeFlag = true;
        }, this.time);
         
      },
      beforeDestroy(){
        window.clearTimeout(this.timer); 
      }
    })
    
    //往notifyWrap里面添加通知
    notifyWrap.appendChild(notifyDom.$el);
  }
}

//注册
function register(){
  vue.prototype.$myMsg = myMsg
}

export default {
  myMsg,
  register
}

可能大家会发现，这种格式有点陌生，如果有去vue官网观摩过的话，这种格式反而更加熟悉，创建一个vue对象，诸如此类的。

好了问题来了。主题功能有了，我们时如何实现用this.$xxx来调用呢？

第二步：注册

 进入main.js添加就可以了。

import Vue from 'vue';
import App from './App';
import router from './router';
import store from "./store/store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import api from "@/server/api.js";

//这行
import message from "@/components/myMsg/index"


Vue.config.productionTip = false;
Vue.prototype.$http = api;
Vue.use(ElementUI);

//和这行
Vue.use(message.register);

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

只要上面注释的那两行就可以了。其实这里可以偷懒，因为命名为index，所以在引入路径的时候可以不用加上index。在这里，你可以看到注册了，没错上面的注册方法是放在这里弄得，当然，也可以分开写，各自喜欢咯！

第三步：调用

好了，搞了这么久，该怎么调用呢？

this.$myMsg.notify({
   content: "啦啦啦",
   type: 'success',
 //time: 5500
});

是不是几乎一样，赶紧试试！

结束

 本人还是个实习生，可能上面还有很多不合理得地方吧，还请各位大神多多指教！