这篇文章将为大家详细讲解有关vue如何从零实现一个消息通知组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联建站10多年
成都定制网页设计服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,
成都定制网页设计及推广,对
成都橡塑保温等多个行业拥有丰富的网站运维经验的网站建设公司。
具体如下：
利用vue从零实现一个消息通知组件
平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。
重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方，方便维护。3.提升自己的视野，让自己站在更高的角度来看问题。
文件目录的组件
工欲善其事，必先利其器，要想实现一个组件，一个好的目录结构，即可以划分职责，不同模块处理不同的逻辑！
我的目录结果是这样的：
接下来，我们依次对notification.vue, notify.js, index.js三个文件作介绍。
notification.vue
notification.vue是一个负责消息通知组件的视觉呈现，里面的逻辑很简单。
{{content}}
{{btn}}
.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;
}
}
notify.jsnotify.js是一个处理消息通知组件的逻辑部分，其主要作用是暴露一个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实例
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.jsindex.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'
})效果
为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
关于“vue如何从零实现一个消息通知组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网站栏目：vue如何从零实现一个消息通知组件-创新互联
本文来源：http://chengdu.cdxwcx.cn/article/eihoi.html
