廢話少說，上效果圖

前言

? ? 本人在做畢設(shè)的時(shí)候用elementui寫頁面的時(shí)候，覺得這個(gè)通知很有趣，可以用一個(gè)命令（this.$notify)這樣子調(diào)用，很神奇。所以打算自己封裝一個(gè)，以后就可以隨便調(diào)用了。

第一步：創(chuàng)建這個(gè)通知的模板

首先，你在vue的項(xiàng)目里面，找個(gè)合適的位置創(chuàng)建一個(gè)文件夾，創(chuàng)建一個(gè)vue的文件以及一個(gè)js文件

代碼如下

myNotify.vue

?我通過 transition?實(shí)現(xiàn)過渡，v-if 來決定顯示類型，其他的就是一些樣式了（個(gè)人覺得這樣寫挺冗余的，可以改進(jìn)）

<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>錯(cuò)誤</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的通知的時(shí)候，我發(fā)現(xiàn)在他是通過在body里面插入元素來實(shí)現(xiàn)的，但是我覺得一個(gè)個(gè)的有點(diǎn)散，所以用一個(gè)div來包裹住他們，這樣一來還可以不用通過js來計(jì)算高度來實(shí)現(xiàn)排隊(duì)，反而變得更加簡(jiǎn)單。通過timeout來記時(shí)，實(shí)現(xiàn)停留效果，監(jiān)聽timeFlag的變化來決定是否消失該條通知。注冊(cè)方法的作用在下面詳說。

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

// 創(chuàng)建vue組件實(shí)例
const notify = vue.extend(myNotify);

//添加通知節(jié)點(diǎn)(用來存放通知的元素)
let notifyWrap = document.createElement('div');
notifyWrap.className = "notify-wrap"
notifyWrap.style = "position: fixed; right: 0px; transition-duration: .5s;"
document.body.appendChild(notifyWrap);

let myMsg = {
  /**
   * 通知框
   * @content 提示內(nèi)容;
   * @type 提示框類型，parameter： success，error，warning
   * @time 顯示時(shí)長
   */
  notify: ({
    content, 
    type, 
    time = 1500,
  }) => {
    //創(chuàng)建一個(gè)存放通知的div
    const notifyDom = new notify({
      el: document.createElement('div'),
      data () {
        return {
          notifyFlag: true, // 是否顯示
          time: time,//取消按鈕是否顯示
          content: content, // 文本內(nèi)容
          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);
  }
}

//注冊(cè)
function register(){
  vue.prototype.$myMsg = myMsg
}

export default {
  myMsg,
  register
}

可能大家會(huì)發(fā)現(xiàn)，這種格式有點(diǎn)陌生，如果有去vue官網(wǎng)觀摩過的話，這種格式反而更加熟悉，創(chuàng)建一個(gè)vue對(duì)象，諸如此類的。

好了問題來了。主題功能有了，我們時(shí)如何實(shí)現(xiàn)用this.$xxx來調(diào)用呢？

第二步：注冊(cè)

?進(jìn)入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/>'
})

只要上面注釋的那兩行就可以了。其實(shí)這里可以偷懶，因?yàn)槊麨閕ndex，所以在引入路徑的時(shí)候可以不用加上index。在這里，你可以看到注冊(cè)了，沒錯(cuò)上面的注冊(cè)方法是放在這里弄得，當(dāng)然，也可以分開寫，各自喜歡咯！

第三步：調(diào)用

好了，搞了這么久，該怎么調(diào)用呢？

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

是不是幾乎一樣，趕緊試試！

結(jié)束

?本人還是個(gè)實(shí)習(xí)生，可能上面還有很多不合理得地方吧，還請(qǐng)各位大神多多指教！