成人视屏在线观看-国产99精品-国产精品1区2区-欧美一级在线观看-国产一区二区日韩-色九九九

您的位置:首頁技術文章
文章詳情頁

vue從零實現一個消息通知組件的方法詳解

瀏覽:4日期:2023-01-31 09:41:55

本文實例講述了vue從零實現一個消息通知組件的方法。分享給大家供大家參考,具體如下:

利用vue從零實現一個消息通知組件

平時,我們肯定用過類似element-ui,antd等一些UI框架,感受它們帶給我們的便利。但當我們的需求或者設計這些框架內置的相差太大,用起來,就會覺得特別別扭,這時候,就有必要自己來重新造輪子。

重新造輪子,有幾個好處,1.所有代碼都是服務你的業務,沒有太多用不上的東西。2.代碼是由自己維護,而不是第三方,方便維護。3.提升自己的視野,讓自己站在更高的角度來看問題。

好了,那話不多說,開始我們的組件開發吧!

文件目錄的組件

工欲善其事,必先利其器,要想實現一個組件,一個好的目錄結構,即可以劃分職責,不同模塊處理不同的邏輯!

我的目錄結果是這樣的:vue從零實現一個消息通知組件的方法詳解

接下來,我們依次對notification.vue, notify.js, index.js三個文件作介紹。

notification.vue

notification.vue是一個負責消息通知組件的視覺呈現,里面的邏輯很簡單。

<template> <transition name='fade' @after-enter='handleAfterEnter'> <div : v-show='visible'> <span class='notification__content'> {{content}} </span> <span @click='handleClose'>{{btn}}</span> </div> </transition></template><script>export default { name: ’Notification’, props: { content: { type: String, required: true }, btn: { type: String, default: ’關閉’ } }}</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是一個處理消息通知組件的邏輯部分,其主要作用是暴露一個notify的方法出去。代碼如下:

import Vue from ’vue’import Notification from ’./notification’const NotificationConstructor = Vue.extend(Notification)const instances = []let seed = 1const 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實例 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中的內容插入dom節點中去 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 notifyindex.js

index.js主要是對notification.vue組件實現注冊,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.js程序設計有所幫助。

標簽: Vue
相關文章:
主站蜘蛛池模板: 色精品一区二区三区 | 成年人免费在线观看网站 | 久久精品视频免费观看 | 午夜主播福利视频在线观看 | 国产三级日本三级美三级 | 久久久999国产精品 久久久99精品免费观看 | 99久久国产综合精品成人影院 | 日韩精品在线一区 | 久久精品国产6699国产精 | 欧美视频久久久 | 毛片免费观看视频 | 白白在线观看永久免费视频 | 欧美日韩国产高清一区二区三区 | 黄色国产在线观看 | 亚洲精品国产精品一区二区 | 亚洲成人欧美 | 亚洲自拍在线观看 | 真正免费一级毛片在线播放 | 精品亚洲永久免费精品 | 久久伊人精品热在75 | 亚洲精品成人一区二区aⅴ 亚洲精品成人一区二区www | 国产一级强片在线观看 | 国产成人黄色 | 亚洲一区二区三区香蕉 | 欧美在线播放视频 | 日日摸人人看97人人澡 | 一级片免费网址 | 久久久久久国产精品免费免 | 中文字幕在线网址 | 国产成人 免费观看 | 国产一区二区在线观看免费 | 国产一区二区在线看 | 99久久亚洲国产高清观看 | 免费看欧美一级特黄a毛片 免费看片aⅴ免费大片 | 国产一区免费观看 | 黄色毛片免费看 | 精品一区二区三区在线视频观看 | 奇米四色综合久久天天爱 | 黄色网址在线免费观看 | 一本一本久久a久久精品综合麻豆 | 成人在线第一页 |