❝

你要相信自己所走的路

大步向前走就好

❞

前言

• 你热情冲动、爱冒险、慷慨，天不怕地不怕。而且一旦下定决心，不到黄河心不死，排除万难也要达到目的
• 你很保守，喜欢稳定，不爱变动。在性格上则比较慢热，对工作、生活、环境都需要比较长的适应期
• 你喜好新鲜事物，有着小聪明，但做事常常不太专一。你脑子中那些新鲜的、稀奇古怪的东西会让人充满好奇
• 你充满了爱心，在你充满坚硬的外壳下面是柔软的内心。你对朋友、对家人非常忠实，做事也会一直坚持到底
• 你，...

你身上一定也会有许许多多的标签
专注 肥宅 加班狗 XXS ...
如果没有，一起去慢慢挖掘吧

1 Tag

选择器+

上课了，老师点个名

• 小明
• 到
• 小明左边的
• 到
• 小明右边的
• 到
• 小明前面的
• 到
• 小明后面的
• 到

有没有对这种老师很无语。。
要是旁边有本字典，老师也不至于如此 那么，遇到生僻字该肿么办？
凉拌呗
学学老师，喊喊前后左右

代码片段

.demo-block.demo-tag .el-tag+.el-tag {
    margin-left: 10px;
}

技巧解析

❝

标签一，到
标签二三四五，到
好累呀，喊了这么久

标签后面的标签
到，到，到，到
你看，这不就解决了吗
+：兄弟选择器，后面那个
~: 兄弟选择器，后面那些
还有一大波选择器正在赶来,笃笃笃

CSS选择器大全解 传送门

❞

props校验

• 滴
• 滴滴
• 滴滴滴
• 吡

最近又出新卡了么？怎么声音都不一样

代码片段

disableTransitions: Boolean,
color: String,
effect: {
  type: String,
  default: 'light',
  validator(val) {
    return ['dark', 'light', 'plain'].indexOf(val) !== -1;
  }
}

技巧解析

❝

普通校验：
String, [String, Number]
特殊校验：
validator(val) {} 函数返回
有没有闻到一点点高级的味道 ^^

prop验证 传送门

❞

JSX事件修饰

• 今天想理个什么发？
• 今天不理发，专程过来做SPA

代码片段

<el-tag 
  :class="class"
  :style="style"
  :@click="handleClick">
  <i
    v-if="closable"
    class="el-tag__close el-icon-close" 
    on-click={ this.handleClose }></i>
</el-tag>

methods: {
  handleClose(event) {
    /**
     * 事件流
     * 阻止冒泡
     */
    event.stopPropagation();
    this.$emit('close', event);
  },
  handleClick(event) {
    this.$emit('click', event);
  }
},
render(h) {
  const { type, tagSize, hit, effect } = this;
  const classes = [
    'el-tag',
    type ? `el-tag--${type}` : '',
    tagSize ? `el-tag--${tagSize}` : '',
    effect ? `el-tag--${effect}` : '',
    hit && 'is-hit'
  ];
  const tagEl = (
    <span
      class={ classes }
      style={{ backgroundColor: this.color }}
      on-click={ this.handleClick }>
      { this.$slots.default }
      {
        this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
      }
    </span>
  );

  return this.disableTransitions 
    ? tagEl 
    : <transition name="el-zoom-in-center">{ tagEl }</transition>;
  }
};

技巧解析

❝

到底怎么做SAP？
vue：click.stop.enter="hander"
JSX：hander(event){...}
阻止冒泡：
event.stopPropagation()
阻止默认事件:
event.preventDefault()
按下enter键
event.keyCode !== 13

事件&按键修饰符 传送门

❞

「你给我一个绚烂的秘密」 「沉睡在仲夏夜里的美丽梦境中」

参考链接

• 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