介绍 & lt; template>
,& lt; transition name=癴ade", @after-enter=癶andleAfterEnter"比;
& lt;才能div 类=皀otification",:, v-show=皏isible"比;
,,& lt; span 类=皀otification__content"比;
,,,{{内容}}
,,& lt;/span>
,,& lt; span 类=皀otification__btn", @click=癶andleClose"在{{btn}} & lt;/span>
& lt;才能/div>
,& lt;/transition>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;通知# 39;
,道具:{
,,内容:{
,,,类型:字符串,
,,要求:真实
,,},
,,btn: {
,,,类型:字符串,
,,,默认值:& # 39;关闭& # 39;
,,}
,}
}
& lt;/script>
& lt; style lang=發ess", scoped>
.fade-enter-active, .fade-leave-active {
,转型:opacity 1 s;
}
.fade-enter, .fade-leave-to {
,不透明度:0;
}
.notification {
,显示:flex;
,background - color: # 303030;
,颜色:rgba (255,, 255,, 255,, 1);
,对齐项目:中心;
,填充:20 px;
位置:大敌;固定;
,min-width: 280 px;
,不必:0,3 px 5 px 1 px rgba (0, 0, 0, 0.2),, 0 px 6 px 10 px 0 px rgba (0, 0, 0, 0.3);
,flex-wrap:包装;
,转型:all 0.3年代;
,,__content {
,,填充:0;
,}
,,__btn {
,,颜色:# ff4081;
,,padding-left: 24 px;
,,margin-left:汽车;
,,光标:指针;
,}
}
& lt;/style> import Vue 得到& # 39;vue # 39;
import Notification 得到& # 39;。/通知# 39;
const NotificationConstructor =, Vue.extend(通知)
const instances =, []
let seed =1
const removeInstance =,(实例),=祝辞,{
,if (!),返回
,const len =instances.length
,const index =, instances.findIndex (ins =祝辞,instance.id ===, ins.id)
,instances.splice(指数,1)
,if (len & lt;=, 1),返回
,const removeHeight =instance.height
,for (let 小姐:=,指数;,小姐:& lt;, len 作用;1;,我+ +),{
[我].verticalOffset 实例才能=,方法(实例[我].verticalOffset),安康;removeHeight 作用;16
,}
}
const notify =, (options =,{}),=祝辞,{
,if (Vue.prototype。isServer美元),返回
,//获取vue实例
,let instance =, new NotificationConstructor ({
,,propsData:选项,
数据才能(),{
,,return {
,,,verticalOffset:, 0,
,,,计时器:,空,
,,,可见:,假的,
,,,身高:0
,,}
,,},
计算才能:{
,,风格(),{
,,,return {
,,,,位置:,& # 39;固定# 39;
,,,,对的:,& # 39;20 px # 39;
,,,,底部:,“$ {this.verticalOffset} px”
,,,}
,,}
,,},
安装(),{才能
,,this.createTimer ()
这。才能el.addEventListener美元(& # 39;mouseenter& # 39;,,(),=祝辞,{
,,,if (this.timer), {
,,,,this.clearTimer (this.timer)
,,,}
,,})
这。才能el.addEventListener美元(& # 39;mouseleave& # 39;,,(),=祝辞,{
,,,if (this.timer), {
,,,,this.clearTimer (this.timer)
,,,}
,,,this.createTimer ()
,,})
,,},
更新才能(),{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关vue如何从零实现一个消息通知组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体如下:
利用vue从零实现一个消息通知组件
平时,我们肯定用过类似element-ui, antd等一些UI框架,感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大,用起来,就会觉得特别别扭,这时候,就有必要自己来重新造轮子。
重新造轮子,有几个好处,1。所有代码都是服务你的业务,没有太多用不上的东西。2。代码是由自己维护,而不是第三方,方便维护。3。提升自己的视野,让自己站在更高的角度来看问题。
文件目录的组件
工欲善其事,必先利其器,要想实现一个组件,一个好的目录结构,即可以划分职责,不同模块处理不同的逻辑!
我的目录结果是这样的:
接下来,我们依次对通知。vue,通知。js, index.js三个文件作介绍。
notification.vue
通知。vue是一个负责消息通知组件的视觉呈现,里面的逻辑很简单。
notify.js
通知。js是一个处理消息通知组件的逻辑部分,其主要作用是暴露一个通知的方法出去。代码如下:
