vue如何從零實(shí)現(xiàn)一個(gè)消息通知組件

這篇文章將為大家詳細(xì)講解有關(guān)vue如何從零實(shí)現(xiàn)一個(gè)消息通知組件，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

利用vue從零實(shí)現(xiàn)一個(gè)消息通知組件

平時(shí)，我們肯定用過(guò)類似element-ui,antd等一些UI框架，感受它們帶給我們的便利。但當(dāng)我們的需求或者設(shè)計(jì)這些框架內(nèi)置的相差太大，用起來(lái)，就會(huì)覺(jué)得特別別扭，這時(shí)候，就有必要自己來(lái)重新造輪子。

重新造輪子，有幾個(gè)好處，1.所有代碼都是服務(wù)你的業(yè)務(wù)，沒(méi)有太多用不上的東西。2.代碼是由自己維護(hù)，而不是第三方，方便維護(hù)。3.提升自己的視野，讓自己站在更高的角度來(lái)看問(wèn)題。

文件目錄的組件

工欲善其事，必先利其器，要想實(shí)現(xiàn)一個(gè)組件，一個(gè)好的目錄結(jié)構(gòu)，即可以劃分職責(zé)，不同模塊處理不同的邏輯！

我的目錄結(jié)果是這樣的：

接下來(lái)，我們依次對(duì)notification.vue, notify.js, index.js三個(gè)文件作介紹。

notification.vue

notification.vue是一個(gè)負(fù)責(zé)消息通知組件的視覺(jué)呈現(xiàn)，里面的邏輯很簡(jiǎn)單。

<template>
 <transition name="fade" @after-enter="handleAfterEnter">
  <div class="notification" : v-show="visible">
   <span class="notification__content">
    {{content}}
   </span>
   <span class="notification__btn" @click="handleClose">{{btn}}</span>
  </div>
 </transition>
</template>
<script>
export default {
 name: 'Notification',
 props: {
  content: {
   type: String,
   required: true
  },
  btn: {
   type: String,
   default: '關(guān)閉'
  }
 }
}
</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active{
 transition: opacity 1s;
}
.fade-enter, .fade-leave-to{
 opacity: 0;
}
.notification{
 display: flex;
 background-color: #303030;
 color: rgba(255, 255, 255, 1);
 align-items: center;
 padding: 20px;
 position: fixed;
 min-width: 280px;
 box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
 flex-wrap: wrap;
 transition: all 0.3s;
 &__content{
  padding: 0;
 }
 &__btn{
  color: #ff4081;
  padding-left: 24px;
  margin-left: auto;
  cursor: pointer;
 }
}
</style>

notify.js

notify.js是一個(gè)處理消息通知組件的邏輯部分，其主要作用是暴露一個(gè)notify的方法出去。代碼如下：

import Vue from 'vue'
import Notification from './notification'

const NotificationConstructor = Vue.extend(Notification)

const instances = []
let seed = 1
const removeInstance = (instance) => {
 if (!instance) return
 const len = instances.length
 const index = instances.findIndex(ins => instance.id === ins.id)

 instances.splice(index, 1)

 if (len <= 1) return
 const removeHeight = instance.height
 for (let i = index; i < len - 1; i++) {
  instances[i].verticalOffset = parseInt(instances[i].verticalOffset) - removeHeight - 16
 }
}
const notify = (options = {}) => {
 if (Vue.prototype.$isServer) return
 // 獲取vue實(shí)例
 let instance = new NotificationConstructor({
  propsData: options,
  data() {
   return {
    verticalOffset: 0,
    timer: null,
    visible: false,
    height: 0
   }
  },
  computed: {
   style() {
    return {
     position: 'fixed',
     right: '20px',
     bottom: `${this.verticalOffset}px`
    }
   }
  },
  mounted() {
   this.createTimer()
   this.$el.addEventListener('mouseenter', () => {
    if (this.timer) {
     this.clearTimer(this.timer)
    }
   })
   this.$el.addEventListener('mouseleave', () => {
    if (this.timer) {
     this.clearTimer(this.timer)
    }
    this.createTimer()
   })
  },
  updated() {
   this.height = this.$el.offsetHeight
  },
  beforeDestroy() {
   this.clearTimer()
  },
  methods: {
   createTimer() {
    this.timer = setTimeout(() => {
     this.visible = false
     document.body.removeChild(this.$el)
     removeInstance(this)
     this.$destroy()
    }, options.timeout || 3000)
   },
   clearTimer() {
    if (this.timer) {
     clearTimeout(this.timer)
    }
   },
   handleClose() {
    this.visible = false
    document.body.removeChild(this.$el)
    removeInstance(this)
    this.$destroy(true)
   },
   handleAfterEnter() {
    // eslint-disable-next-line no-debugger
    this.height = this.$el.offsetHeight
   }
  }
 })

 const id = `notification_${seed++}`
 instance.id = id
 // 生成vue中的$el
 instance = instance.$mount()
 // 將$el中的內(nèi)容插入dom節(jié)點(diǎn)中去
 document.body.appendChild(instance.$el)
 instance.visible = true

 // eslint-disable-next-line no-unused-vars
 let verticalOffset = 0

 instances.forEach(item => {
  verticalOffset += item.$el.offsetHeight + 16
 })

 verticalOffset += 16
 instance.verticalOffset = verticalOffset

 instances.push(instance)

 return instance
}

export default notify

index.js

index.js主要是對(duì)notification.vue組件實(shí)現(xiàn)注冊(cè)，notify方法的掛載。代碼如下：

import Notification from './notification'
import notify from './notify'

export default (Vue) => {
 Vue.component(Notification.name, Notification)
 Vue.prototype.$notify = notify
}

在main.js引入

import Notification from './components/notification'
Vue.use(Notification)

使用

this.$notify({
 content: 'Hello'
})

效果

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

關(guān)于“vue如何從零實(shí)現(xiàn)一個(gè)消息通知組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。