跟随Element学习Vue小技巧(36)——Notification

微信扫一扫,分享到朋友圈

跟随Element学习Vue小技巧(36)——Notification


我不想后悔,不想再懊恼
当时为什么没有去做?

前言
「临时通知:今天没有作业!」

小明,上王者 小红,上王者 小宇,上王者 天天,上王者

滴滴答,滴滴答…
嘟嘟——
您有新消息,请注意查收

纳尼,6连跪,也不至于这样吧
早知道,今天不过节了 ╮(╯▽╰)╭

1 Notification
等宽布局

代码片段

.el-notification {     display: flex;     width: 330px;     padding: 14px 26px 14px 13px;     border-radius: 8px;     box-sizing: border-box;     border: 1px solid #ebeef5;     position: fixed;     background-color: #fff;     … } 复制代码
技巧解析

div,典型的块元素,流体盒子,默认与父级等宽
span,典型的行内元素,内联盒子,随文本变化
h2.title与div.content居然不与父级等宽,而是随文字变化?
咋回事呢?块元素怎么表现出内联元素的特性?
display:inline-block,虽然可以,但是各自随文字变化,不会等宽
到底咋回事呀?感觉盒子会伸缩一样?
不错,就是伸缩盒!display:flex

学习CSS布局 传送门
Flex布局教程 传送门

位置信息
找呀找呀找朋友,找到一个好朋友…
你的好朋友,现在在哪呢?

代码片段 methods: {   open1() {     this.$notify({       title: ‘自定义位置’,       message: ‘右上角弹出的消息’     });   },   open2() {     this.$notify({       title: ‘自定义位置’,       message: ‘右下角弹出的消息’,       position: ‘bottom-right’     });   },   open3() {     this.$notify({       title: ‘自定义位置’,       message: ‘左下角弹出的消息’,       position: ‘bottom-left’     });   },   open4() {     this.$notify({       title: ‘自定义位置’,       message: ‘左上角弹出的消息’,       position: ‘top-left’     });   } } 复制代码 data() {   return {     …     position: ‘top-right’   }; }, computed: {   horizontalClass() {     return this.position.indexOf(‘right’) > -1 ? ‘right’ : ‘left’;   },   verticalProperty() {     return /^top-/.test(this.position) ? ‘top’ : ‘bottom’;   },   positionStyle() {     return {       [this.verticalProperty]: ${ this.verticalOffset }px
};   } }, 复制代码
… let verticalOffset = options.offset || 0; instances.filter(item => item.position === position).forEach(item => {   verticalOffset += item.$el.offsetHeight + 16; }); verticalOffset += 16; instance.verticalOffset = verticalOffset; … 复制代码
技巧解析

四种位置关系:
top-right bottom-right
bottom-left top-left
分两类,horizontal 和 vertical
每个纵向距离依次递增
verticalOffset += 16

方法扩展
你以为笨方法都是笨小孩想出来的吗?
其实,最笨的方法,也是聪明想的出来的
毕竟,偷懒也是有利于发展的嘛

还在摸鱼,BUG改完了没?工作饱和了吗?
[‘success’, ‘warning’, ‘info’, ‘error’].forEach(type => {   Notification[type] = options => {     if (typeof options === ‘string’ || isVNode(options)) {       options = {         message: options       };     }     options.type = type;     return Notification(options);   }; }); 复制代码
// options增加type属性 this.$notify({   title: ‘成功’,   message: ‘这是一条成功的提示消息’,   type: ‘success’ }); // 方法上扩展类型属性,本质同上 this.$notify.error({   title: ‘错误’,   message: ‘这是一条错误的提示消息’ }); 复制代码
技巧解析

每次配置都要加上type属性,麻烦
好吧好吧,直接调用方法呗
Notification,实例上挂载方法,内部添加type属性
我的鱼呢,再摸会儿,嘻嘻嘻

「我要用什么样的速度」

「才能与你相遇」
参考链接

element官网 element代码仓库 vue官网 ES6入门教程
往期回顾

跟随Element学习Vue小技巧(1)——Layout 跟随Element学习Vue小技巧(2)——Container 跟随Element学习Vue小技巧(7)——Button 跟随Element学习Vue小技巧(8)——Link 跟随Element学习Vue小技巧(9)——Radio 跟随Element学习Vue小技巧(10)——Checkbox 跟随Element学习Vue小技巧(11)——Input 跟随Element学习Vue小技巧(12)——InputNumber 跟随Element学习Vue小技巧(13)——Select 跟随Element学习Vue小技巧(14)——Cascader 跟随Element学习Vue小技巧(15)——Switch 跟随Element学习Vue小技巧(16)——Slider 跟随Element学习Vue小技巧(17)——TimePicker 跟随Element学习Vue小技巧(18)——DatePicker 跟随Element学习Vue小技巧(20)——Upload 跟随Element学习Vue小技巧(21)——Rate 跟随Element学习Vue小技巧(23)——Transfer 跟随Element学习Vue小技巧(24)——Form 跟随Element学习Vue小技巧(25)——Table 跟随Element学习Vue小技巧(26)——Tag 跟随Element学习Vue小技巧(27)——Progress 跟随Element学习Vue小技巧(28)——Tree 跟随Element学习Vue小技巧(29)——Pagination 跟随Element学习Vue小技巧(31)——Avatar 跟随Element学习Vue小技巧(33)——Loading 跟随Element学习Vue小技巧(34)——Message

微信扫一扫,分享到朋友圈

跟随Element学习Vue小技巧(36)——Notification

2020年将是有史以来最热的年份之一 大流行对全球观测系统产生重大影响

上一篇

ES6 的循环和可迭代对象

下一篇

你也可能喜欢

跟随Element学习Vue小技巧(36)——Notification

长按储存图像,分享给朋友