❝如果一直想着麻烦的事
只会更麻烦
❞
前言
有个虔诚的基督教徒抽烟得病死掉了，来到天国见到上帝。
他说：“哦，上帝，我是那么虔诚地爱您，怎么我抽烟得病死掉这种事，您不给我一点提示呢？”
上帝说：“我给了你多少次提示啊，你没发现你常常找不到你的打火机么!”
你肯定有收到过上帝的提示吧
不管怎么样，多留点心总是好的 ^^
1 Tooltip
slot
代码片段
getFirstElement() {
const slots = this.$slots.default;
if (!Array.isArray(slots)) return null;
let element = null;
for (let index = 0; index < slots.length; index++) {
if (slots[index] && slots[index].tag) {
element = slots[index];
};
}
return element;
}
技巧解析
❝明明写了两个button，却显示了后面那个，什么鬼？
❞
原来，遍历之后，最后一个tag，覆盖了前面的tag
注意没，没有标签的slot，不是数组哦
所以文本是无法使用tooltip的
tooltip
代码片段
<el-tooltip placement="top">
<div slot="content">多行信息<br/>第二行信息</div>
<el-button>Top center</el-button>
</el-tooltip>
// JSX语法
(
<transition
name={ this.transition }
onAfterLeave={ this.doDestroy }>
<div
...
}>
{ this.$slots.content || this.content }
</div>
</transition>)
)
技巧解析
❝❞
<br/>标签可以换行，怎么做到的？
只有解析成了html，才能换行呀
你瞧，JSX插值，渲染为html
vue的插值，渲染为text，那么，能够渲染为html吗？
能的，指令v-html
vue原始HTML 传送门
「你不在的世界里」
「我无法找到任何意义」
参考链接
往期回顾
- 跟随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
