清新UI組件庫——input組件開發思路

清新組件庫：http://ifresh-ui.yating.online/

源碼地址：https://github.com/Chenyating...

input組件遇到的問題

v-model問題

外部value變化，input的值沒有變化？

先理解v-model的性質

<input v-model="searchText">
等價於
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

組件上使用v-model

<if-input v-model="searchText"></if-input>
等同於
<if-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></if-input>

要讓if-input能正常使用，必須：

1. 將其 value 特性綁定到一個名叫value的prop上

props: {
        value:{
            type:String,
            default:''
        }
    },

1. 在其 input 事件被觸發時，將新的值經過自定義的input事件拋出

自定義組件裏的input要這麼寫：
<input :value="reciveValue" @input="inputMethod" />

注意：reciveValue=this.value，要指向value，不這麼寫，無法雙向綁定。

data(){
  return{
    reciveValue:this.value
  }
}

      inputMethod(e) {
            this.receiveValue=e.target.value;
            this.$emit('input', this.receiveValue);
        }

內部input變化，外部沒有變化

反正每次值發送變化的時候，就$emit一下

input的方法

• 一、當input 獲取到焦點時觸發,最早觸發

focusMethod(e) {
      this.$emit('focus', e)
  }

• 二、主要是用於 input type=button，當被點擊時觸發此事件

clickMethod(e) {
    this.$emit('click', e)
  }

• 三、input輸入文字

keydownMethod(e) {
    this.$emit('keydown', e)
  }

• 四、當input的value值發生變化時就會觸發，不用等到失去焦點

inputMethod(e) {
    if (this.readonly) {
        this.$emit('input', this.currentValue);
    } else {
        this.currentValue = e.target.value;
        this.$emit('input', this.currentValue);
    }
  }

• 五、完成輸入，在此事件觸發以前必定觸發了onkeydown事件

keyupMethod(e) {
    this.$emit('keyup', e)
  }

• 六、離開input時，且表單的value發生變化觸發，沒有發生變化就不觸發；

changeMethod(e) {
    this.$emit('change', e)
  }

• 七、當input失去焦點時觸發，注意：這個事件觸發的前提是已經獲取了焦點再失去焦點的時候會觸發相應的

blurMethod(e) {
    this.$emit('blur', e)
  }

• 八、表單選中內部內容觸發

selectMethod(e) {
    this.$emit('select', e)
  }