vue从零实现一个消息通知组件的方法详解

2023-07-28 15:32:13 345

本文实例讲述了vue从零实现一个消息通知组件的方法。分享给大家供大家参考，具体如下：

利用vue从零实现一个消息通知组件

平时，我们肯定用过类似element-ui,antd等一些UI框架，感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大，用起来，就会觉得特别别扭，这时候，就有必要自己来重新造轮子。

重新造轮子，有几个好处，1.所有代码都是服务你的业务，没有太多用不上的东西。2.代码是由自己维护，而不是第三方，方便维护。3.提升自己的视野，让自己站在更高的角度来看问题。

好了，那话不多说，开始我们的组件开发吧！

文件目录的组件

工欲善其事，必先利其器，要想实现一个组件，一个好的目录结构，即可以划分职责，不同模块处理不同的逻辑！

我的目录结果是这样的：

接下来，我们依次对notification.vue,notify.js,index.js三个文件作介绍。

notification.vue

notification.vue是一个负责消息通知组件的视觉呈现，里面的逻辑很简单。




.fade-enter-active,.fade-leave-active{
transition:opacity1s;
}
.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:03px5px-1pxrgba(0,0,0,0.2),0px6px10px0pxrgba(0,0,0,0.3);
flex-wrap:wrap;
transition:all0.3s;
&__content{
padding:0;
}
&__btn{
color:#ff4081;
padding-left:24px;
margin-left:auto;
cursor:pointer;
}
}

notify.js

notify.js是一个处理消息通知组件的逻辑部分，其主要作用是暴露一个notify的方法出去。代码如下：

importVuefrom'vue'
importNotificationfrom'./notification'

constNotificationConstructor=Vue.extend(Notification)

constinstances=[]
letseed=1
constremoveInstance=(instance)=>{
if(!instance)return
constlen=instances.length
constindex=instances.findIndex(ins=>instance.id===ins.id)

instances.splice(index,1)

if(len<=1)return
constremoveHeight=instance.height
for(leti=index;i{
if(Vue.prototype.$isServer)return
//获取vue实例
letinstance=newNotificationConstructor({
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-lineno-debugger
this.height=this.$el.offsetHeight
}
}
})

constid=`notification_${seed++}`
instance.id=id
//生成vue中的$el
instance=instance.$mount()
//将$el中的内容插入dom节点中去
document.body.appendChild(instance.$el)
instance.visible=true

//eslint-disable-next-lineno-unused-vars
letverticalOffset=0

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

verticalOffset+=16
instance.verticalOffset=verticalOffset

instances.push(instance)

returninstance
}

exportdefaultnotify

index.js

index.js主要是对notification.vue组件实现注册，notify方法的挂载。代码如下：

importNotificationfrom'./notification'
importnotifyfrom'./notify'

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

在main.js引入

importNotificationfrom'./components/notification'
Vue.use(Notification)

使用

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

效果

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。