input组件

input组件地址

input组件测试代码

1. 思路

1. 样式

   1. 宽高样式
   2. 状态样式
      1. focus状态
      2. hover状态
      3. disabled状态
      4. readonly状态
      5. :error属性状态下文字展示、排列等等...

2. 事件

   1. 需要$emit的eventName和...args

3. 双向数据绑定

<s-input v-model='message'></s-input>
`v-model`相当于一个语法糖会将`s-input`转换为：
<s-input :value='message' @input='message = $event.target.value'></s-input>

内部的双向绑定实现：
<template>
  <input :value='value' @input='$emit('input', $event.target.value)'></input>
</template>
<script>
  export default {
    props: {
      value: {
        type: String
      }
    }
  }
</script>

2. 测试

在使用Karma、Mocha、Sinon做测试的时候需要注意的地方：

//  由于input、change、blur、focus事件都需要使用JS触发
1.  首先需要添加事件：
  IE：element.attachEvent(on + eventName, fn)
  其他高级浏览器：element.addEventListener(eventName, fn)

2.  触发事件：
  IE比较好解决：
    只要使用element.fireEvent(on + eventName)

  其他高级浏览器：
    方式一：
      const event = document.createEvent('HTMLEvent')  //createEvent已废弃
      event.initEvent(eventName, false, true)
      element.dispatchEvent(event)

    方式二：
      const event = new Event(typeArg, eventInit)  
      //typeArg表示所创建事件的名称 
      //eventInit表示初始化事件类型（具体查询MDN, 下方有链接）
      
      //由于input、change事件在$emit中返回的是$event.target.value(浏览器给予的)，而用new Event创建的没有，所以需要如果要获得$event.target.value，就需要加多一段代码
     Object.defineProperty(event, 'target', {
         value: { value: 'hi' },
         enumerable: true
      })
      
      element.dispatchEvent(event)

MDN - new Event