❝就这点程度
还不足以折断我的灵魂
❞
前言
- 有一天，我看见了四十四次日落！
- 你知道吗，人在难过的时候就会爱上日落。
- 在你看了四十四次日落那天，你很难过吗？
你有没有看过日落呢？
又看过多少次？
别难过，也许时间是一种解药
跟随我，一起探索时间的秘密，也许你就不会那么的难过了
(ﾉ"◑ ◑)ﾉ"(｡•́︿•̀｡)
1 Timeline
DOM结构
代码片段
/* 最后一个线条隐藏 */
.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
display: none;
}
/* 线条高度撑满盒子 */
.el-timeline-item__tail {
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid #e4e7ed;
}
/* 内容区域左侧预留28px */
.el-timeline-item__wrapper {
position: relative;
padding-left: 28px;
top: -3px;
}
技巧解析
❝时间线，ul>li列表
❞
列表项最后一个，线条隐藏
线条定位，高度100%，撑满盒子
内容左侧padding为28px,空出位置
原点dot是可以自定义的，有插槽slot
小技巧
DOM反转
代码片段
/*
* this.$slots.default为数组
* this.$slots.default.reverse()，数组反转，时间线倒序
*/
render() {
const reverse = this.reverse;
const classes = {
'el-timeline': true,
'is-reverse': reverse
};
let slots = this.$slots.default || [];
if (reverse) {
slots = slots.reverse();
}
return (<ul class={ classes }>
{ slots }
</ul>);
}
「二十七岁的我」
「丝毫不比十五岁的我聪明」
参考链接
往期回顾
- 跟随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
- 跟随Element学习Vue小技巧(37)——Menu
- 跟随Element学习Vue小技巧(38)——Tabs
- 跟随Element学习Vue小技巧(39)——Breadcrumb
- 跟随Element学习Vue小技巧(41)——Dropdown
- 跟随Element学习Vue小技巧(42)——Steps
- 跟随Element学习Vue小技巧(43)——Dialog
- 跟随Element学习Vue小技巧(44)——Tooltip
- 跟随Element学习Vue小技巧(45)——Popover
- 跟随Element学习Vue小技巧(48)——Carousel
- 跟随Element学习Vue小技巧(49)——Collapse
