❝我不想后悔,不想再懊恼
当时为什么没有去做?
❞
前言
「临时通知:今天没有作业!」
- 小明,上王者
- 小红,上王者
- 小宇,上王者
- 天天,上王者
滴滴答,滴滴答...
嘟嘟——
您有新消息,请注意查收
纳尼,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学习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