darkti UI—input轮子及单元测试

一、整理一下README

1、梳理每一项标题，可参考vue的README;
2、解决iconfont文件的引入问题（不让用户自己去引入，我们给他引入好）

二、分析用户用例（user case）

• 有这么几种状态：normal,hovered,focused,disabled,readonly,error,errorFocused,errorHovered；

  
  image.png

三、开始写input

1、disabled的写法

// 下面两种写法都可以，第一种千万不要忘记“:”，第二种是简写，意思是只要写了disabled，disabled就为true
<g-input :disabled="true"></g-input>
<g-input disabled></g-input>

&[disabled]{
       cursor: not-allowed;    //鼠标变成不可编辑样式
   }

2、disabled和readonly的区别

• disabled不可以focus，readonly可以focus，且可以复制里面的内容；
  3、 <template></template>的使用

// 这里为什么不<div>，因为此处只是为了用v-if包住他们，用了div还要调样式
<template v-if="error">
      <Icon name='error' class="icon-error"></Icon>
      <span class="errorMessage">{{error}}</span>
</template>

四、单元测试，写完几个属性就要进行一下

1、主要注意事件的测试

describe('事件',() => {
        const Constructor = Vue.extend(Input)
        let vm
        afterEach(() => {
            vm.$destroy()
        })
        it('支持change/input/focus/blur事件', () => {
            vm = new Constructor({}).$mount()
            const callback = sinon.fake()
            vm.$on('change',callback)
            //触发input的change 事件
            let event = new Event('change');  //重要的是下面这几句
            let inputElement = vm.$el.querySelector('input')
            inputElement.dispatchEvent(event)
            expect(callback).to.have.been.calledWith(event)
        })
    })

为了具体理解上面重要的那几句，我们可以把它写进app.js里来理解

new Vue({
    el: '#app',
    data:{},
    created(){
        setTimeout(()=>{
            let event = new Event('change');
            let inputElement = this.$el.querySelector('input')
            inputElement.dispatchEvent(event)
            console.log('ni');
        },3000)
    },
    methods: {
        inputChange(e){
            console.log(e,'eeeee')
        }
    }
})

过3秒后，真的就触发了change事件，打印出内容了

image.png

2. 这些库都是有哪里提供的

• Karma.conf.js主要用来打开浏览器，并引入一些基础库

  
  单元测试库.png

五、写g-input的v-model

1、首先要知道v-model是怎么实现的

<div id="app">
     <input type="text" :value="message" @input="message = $event.target.value">
    <div>{{message}}</div>
  </div>

new Vue({
  el:'#app',
  data:{
    message: 'nct'
  }
})

以上代码就实现了v-model的双向绑定~~~