element-ui表單源碼解析之el-input

關於表單校驗el-input作的主要工做就是跟el-form-item交互，把input的相關事件發送給el-form-item，上一篇已經講到在el-form-item的mounted的生命週期裏面有以下代碼的

this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
複製代碼

咱們在el-input裏面依然能夠看到inject，鑑於有不少單獨使用el-input的地方，因此也給了默認值。

inject: {
	elForm: {
		default: ''
	},
	elFormItem: {
		default: ''
	}
},
複製代碼

看看computed####

其實這裏面的比較簡單，基本都是控制狀態和樣式的，有些狀態是由el-form或者el-form-item控制的。

watch####

直接監聽父級傳入的value，根據value來設置組件內保存的currentValue。

看看 methods

focus() {
        (this.$refs.input || this.$refs.textarea).focus();
      },
    blur() {
        (this.$refs.input || this.$refs.textarea).blur();
      },
	select() {
        (this.$refs.input || this.$refs.textarea).select();
      },
	handleFocus(event) {
        this.focused = true;
        this.$emit('focus', event);
      },
	handleBlur(event) {
        this.focused = false;
        this.$emit('blur', event);
        if (this.validateEvent) {
          this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
        }
      },
	 handleInput(event) {
        const value = event.target.value;
        this.setCurrentValue(value);
        if (this.isOnComposition) return;
        this.$emit('input', value);
      },
      handleChange(event) {
        this.$emit('change', event.target.value);
      },
	handleComposition(event) {
        if (event.type === 'compositionend') {
          this.isOnComposition = false;
          this.currentValue = this.valueBeforeComposition;
          this.valueBeforeComposition = null;
          this.handleInput(event);
        } else {
          const text = event.target.value;
          const lastCharacter = text[text.length - 1] || '';
          this.isOnComposition = !isKorean(lastCharacter);
          if (this.isOnComposition && event.type === 'compositionstart') {
            this.valueBeforeComposition = text;
          }
        }
      },
複製代碼

屬性validateEvent默認是true， 調用dispatch向上發送事件，若是存在父組件el-form-item的話，就能直接$emit對應的事件了。

在此，element-ui的表單校驗系列就講完了。

順便提一下compositionstart，compositionupdate，compositionend事件。 以一個業務場景舉例吧：

好比表單裏還能夠輸入兩個字符，但我輸入中文用的是拼音，要完成最後兩個漢字的輸入，須要按不少個字母鍵，但每一鍵都會由於input事件而截取value，致使最後兩個漢字不能輸入。

解決辦法，使用composition來處理，有compositionstart和compositionend事件。

當咱們打漢字的時候，是屬於非直接輸入的，這個時候應當是咱們按下空格鍵或者選擇某個漢字詞後纔算真正的輸入，使用compositionend事件後取到的值來進行長度判斷。

compositionstart事件在用戶開始進行非直接輸入的時候出觸發，在非直接輸入結束，也就是在用戶點候選詞或者點擊選定按鈕以後，會出發compositionend事件。

el-input處於compositionstart或者compositionupdate事件進行中會用了isOnComposition來標記下，具體是根據最後一個字符來判斷的this.isOnComposition = !isKorean(lastCharacter);，若是是compositionstart還會用valueBeforeComposition先存儲input裏面輸入的值。 原文地址：element-ui表單源碼解析之el-input