vue组件库知识点

touchstart 和 click 事件

1、原生的touchstart: 只能在移动设备上触发，在用户手指触碰屏幕的一瞬间触发所绑定的事件。
2、原生的click：click事件会推迟300ms触发，所以输入数字键盘和移动设备上，最好使用touchstart绑定事件。
3、同时绑定2个事件：PC端只能触发click事件。移动端先触发touchstart事件，再触发click事件
4、vue的touchstart和click：在PC端和移动端都会触发，先后顺序和原生一样。避免2个事件同时触发：touchstart.prevent

推荐的组件设计思想

参考：lnzi-cell和lnzi-field组件：lnzi-field实现了在lnzi-cell的基础上扩展功能，充分利用了slot功能。

input输入框正在输入的时候点击清空按钮input输入框不会失焦

点击事件使用touchstart.prevent监听，就不会使input失焦

组件为什么可以使用原生事件，如lnzi-field可以绑定@focus和@blur事件

// demo.vue
<lnzi-field ref="field1" title="可点击" readonly is-link @click="handleClick" border @focus="handleFocus"></lnzi-field>
<lnzi-field ref="field2" title="可点击" readonly is-link @click="handleClick" border @focus="handleFocus(2)"></lnzi-field>
<lnzi-field ref="field3" title="可点击" readonly is-link @click="handleClick" border @focus.native="handleFocus(2)"></lnzi-field>

methods: {
  handleFocus (val) {
    console.log(val) // field1: input元素。(field2,field3): 2 
  }
}

// lnzi-field.vue
computed: {
  listeners () {
    return {
      ...this.$listeners,
      input: this.onInput, // 替换传入的input事件
      focus: this.onFocus, // 替换传入的focus事件
      blur: this.onBlur // 替换传入的blur事件
    }
  }
},
methods: {
  onFocus (event) {
    this.focused = true
    console.log(this.$listeners)
    // (field1, field2): { click: f, focus: f }; field3: { click: f }，所以native事件不会被listeners获取到，因为被绑定到根元素中。
    this.$emit('focus', event) // 调用handleFocus。
    // 所以是组件调用了emit触发了handleFocus事件，但是组件中聚焦的时候还需要做一些事情，所以要替换传入的handleFocus事件
  }
}