Element Input組件分析小結(jié)

更新時(shí)間：2018年10月11日 14:36:36 作者：liril

這篇文章主要介紹了Element Input組件分析小結(jié)，詳細(xì)的介紹了Input組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

input組件相對來說復(fù)雜一點(diǎn)，我們先從它用到的一個(gè)工具庫calcTextareaHeight.js進(jìn)行分析。

calcTextareaHeight.js

calcTextareaHeight.js使用來計(jì)算文本框的高度的，我們根據(jù)代碼順序從上往下進(jìn)行分析。

HIDDEN_STYLE

HIDDEN_STYLE是一個(gè)常量，存儲(chǔ)隱藏時(shí)候的css樣式的。

const HIDDEN_STYLE = `
 height:0 !important;
 visibility:hidden !important;
 overflow:hidden !important;
 position:absolute !important;
 z-index:-1000 !important;
 top:0 !important;
 right:0 !important
`;

CONTEXT_STYLE

CONTEXT_STYLE也是一個(gè)常量，用來存儲(chǔ)要查詢的樣式名。

const CONTEXT_STYLE = [
 'letter-spacing',
 'line-height',
 'padding-top',
 'padding-bottom',
 'font-family',
 'font-weight',
 'font-size',
 'text-rendering',
 'text-transform',
 'width',
 'text-indent',
 'padding-left',
 'padding-right',
 'border-width',
 'box-sizing'
];

calculateNodeStyling

calculateNodeStyling用來獲取結(jié)點(diǎn)的某些樣式。

function calculateNodeStyling(node) {
 const style = window.getComputedStyle(node); // 獲取結(jié)點(diǎn)的計(jì)算后的樣式，即實(shí)際渲染的樣式

 const boxSizing = style.getPropertyValue('box-sizing'); // 獲取 box-sizing 的值

 // 上下的 padding 之和
 const paddingSize = (
  parseFloat(style.getPropertyValue('padding-bottom')) +
  parseFloat(style.getPropertyValue('padding-top'))
 );

 // 上下的邊框?qū)挾群停ㄆ鋵?shí)是看上去的高度）
 const borderSize = (
  parseFloat(style.getPropertyValue('border-bottom-width')) +
  parseFloat(style.getPropertyValue('border-top-width'))
 );

 // 其他一些樣式
 const contextStyle = CONTEXT_STYLE
  .map(name => `${name}:${style.getPropertyValue(name)}`)
  .join(';');

 return { contextStyle, paddingSize, borderSize, boxSizing };
}

calcTextareaHeight

calcTextareaHeight是最終暴露出去的函數(shù)，用來計(jì)算文本域的高度。

export default function calcTextareaHeight(
 targetNode, // 要計(jì)算的結(jié)點(diǎn)
 minRows = null, // 最小的行數(shù)
 maxRows = null // 最大的行數(shù)
) {
 if (!hiddenTextarea) { // 來創(chuàng)建一個(gè)隱藏的文本域，所有的計(jì)算都是在這上面進(jìn)行的
  hiddenTextarea = document.createElement('textarea');
  document.body.appendChild(hiddenTextarea);
 }

 // 獲取結(jié)點(diǎn)一些樣式值
 let {
  paddingSize,
  borderSize,
  boxSizing,
  contextStyle
 } = calculateNodeStyling(targetNode);

 // 設(shè)置相應(yīng)的樣式
 hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
 // 設(shè)置內(nèi)容，按優(yōu)先級一次是 結(jié)點(diǎn)的 value， 結(jié)點(diǎn)的 placeholder， 以及空字符串
 hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';

 // 獲取滾動(dòng)高度
 let height = hiddenTextarea.scrollHeight;

 if (boxSizing === 'border-box') {
  // 如果是 border-box，說明高度得加上邊框
  height = height + borderSize;
 } else if (boxSizing === 'content-box') {
  // 如果是 content-box，說明得減去上下內(nèi)邊距
  height = height - paddingSize;
 }

 // 計(jì)算單行高度，先清空內(nèi)容
 hiddenTextarea.value = '';
 // 再用滾動(dòng)高度減去上下內(nèi)邊距
 let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

 if (minRows !== null) { // 如果參數(shù)傳遞了 minRows
  let minHeight = singleRowHeight * minRows; // 說明最少應(yīng)當(dāng)有這么多行的高度
  if (boxSizing === 'border-box') { // 如果是 border-box，還得加上上下內(nèi)邊距和上下邊框的寬度
   minHeight = minHeight + paddingSize + borderSize;
  }
  height = Math.max(minHeight, height); // 取二者最大值
 }
 if (maxRows !== null) { // 如果參數(shù)傳遞了 maxRows
  let maxHeight = singleRowHeight * maxRows; // 說明最多只能有這么多行的高度
  if (boxSizing === 'border-box') { // 如果是 border-box，還得加上上下內(nèi)邊距和上下邊框的寬度
   maxHeight = maxHeight + paddingSize + borderSize;
  }
  height = Math.min(maxHeight, height); // 取二者最小值
 }

 // 返回文本域應(yīng)當(dāng)設(shè)置的高度
 return { height: height + 'px'};
};

input.vue

input組件較為繁瑣，我們一點(diǎn)點(diǎn)分析。

生命周期

created

創(chuàng)建的時(shí)候會(huì)監(jiān)聽inputSelect事件，并調(diào)用inputSelect方法。

created() {
 this.$on('inputSelect', this.inputSelect);
},

inputSelect方法會(huì)調(diào)用refs上的input的原生的select方法，來選中該input。

methods: {
 inputSelect() {
  this.$refs.input.select();
 },
}

mounted

掛載的時(shí)候，會(huì)調(diào)用resizeTextarea方法來設(shè)置文本域的大小。

mounted() {
 this.resizeTextarea();
}

methods: {
 resizeTextarea() {
  if (this.$isServer) return; // 如果是服務(wù)端渲染，直接返回，不進(jìn)行下面的邏輯
  var { autosize, type } = this;
  if (!autosize || type !== 'textarea') return; // 如果 autosize 是 false，或者當(dāng)前不是文本域，也直接返回
  const minRows = autosize.minRows; // 最少行數(shù)
  const maxRows = autosize.maxRows; // 最大行數(shù)

  this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows); // 計(jì)算文本域的高度，并賦值
 },
}

最外層

最外層是一個(gè)div，上面設(shè)置了一些動(dòng)態(tài)的class。

<div :class="[
 type === 'textarea' ? 'el-textarea' : 'el-input',
 size ? 'el-input--' + size : '',
 {
  'is-disabled': disabled,
  'el-input-group': $slots.prepend || $slots.append,
  'el-input-group--append': $slots.append,
  'el-input-group--prepend': $slots.prepend
 }
]">
</div>

type

type是一個(gè)prop，它默認(rèn)設(shè)置為text，如果設(shè)置為textarea，表明當(dāng)前是一個(gè)文本域。

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

size

size也是一個(gè)prop，用來設(shè)置輸入框的大小，在textarea下無效。

props: {
 size: String,
}

disabled

disabled也是一個(gè)prop，用來設(shè)置是否可用。

props: {
 disabled: Boolean,
}

prepend、append

這兩個(gè)都是在設(shè)置輸入框組的時(shí)候使用的，通過具名slot傳入，分別放置于input的首和尾。

input

然后，根據(jù)type的不同使用v-if分別渲染input或者textarea，我們先分析input部分。

前置元素

前置元素直接通過具名slot傳入。

<div class="el-input-group__prepend" v-if="$slots.prepend">
 <slot name="prepend"></slot>
</div>

input 圖標(biāo)

圖標(biāo)也是通過具名slot傳入的，也可以通過prop中的icon傳入圖標(biāo)名。

<slot name="icon">
 <i
  class="el-input__icon"
  :class="'el-icon-' + icon"
  v-if="icon"
  @click="handleIconClick">
 </i>
</slot>

上面還綁定了一個(gè)handleIconClick的點(diǎn)擊事件，它會(huì)觸發(fā)click事件：

methods: {
 handleIconClick(event) {
  this.$emit('click', event);
 },
}

input

然后是最重要的input部分，上面大部分是prop，不進(jìn)行講解，其余的我們將一一講解。

<input
 v-if="type !== 'textarea'"
 class="el-input__inner"
 :type="type" // 類型
 :name="name" // 名字
 :placeholder="placeholder" // 默認(rèn)值
 :disabled="disabled" // 是否禁用
 :readonly="readonly" // 是否只讀
 :maxlength="maxlength" // 輸入的最大長度
 :minlength="minlength" // 輸入的最小長度（暫時(shí)不支持）
 :autocomplete="autoComplete" // 自動(dòng)補(bǔ)全
 :autofocus="autofocus" // 自動(dòng)聚焦
 :min="min" // 允許輸入的最小值（數(shù)字或者日期）
 :max="max" // 允許輸入的最大值（數(shù)字或者日期）
 :form="form" // 綁定的表單（不是原生的）
 :value="currentValue" // 輸入值
 ref="input" // 引用
 @input="handleInput" // 輸入事件
 @focus="handleFocus" // 獲得焦點(diǎn)事件
 @blur="handleBlur" // 失去焦點(diǎn)事件
>

value

value改變的時(shí)候會(huì)調(diào)用setCurrentValue。

watch: {
 'value'(val, oldValue) {
  this.setCurrentValue(val);
 }
},

而setCurrentValue是用來改變當(dāng)前值的。

methods: {
 setCurrentValue(value) {
  if (value === this.currentValue) return; // 如果新舊值一致直接返回

  this.$nextTick(_ => {
   this.resizeTextarea(); // 下一個(gè)DOM更新周期時(shí)，重新設(shè)置文本域大小
  });

  this.currentValue = value; // 改變當(dāng)前值
  this.$emit('input', value); // 觸發(fā) input 事件
  this.$emit('change', value); // 觸發(fā) change 事件
  this.dispatch('ElFormItem', 'el.form.change', [value]); // 向父級的派發(fā) el.form.change 事件
 }
}

handleInput

處理輸入事件。

methods: {
 handleInput(event) {
  this.setCurrentValue(event.target.value); // 改變當(dāng)前值
 },
}

handleFocus

handleFocus用來處理獲得焦點(diǎn)的事件，會(huì)直接觸發(fā)focus事件。

methods: {
 handleFocus(event) {
  this.$emit('focus', event);
 },
}

handleBlur

handleBlur用來處理失去焦點(diǎn)的事件。

methods: {
 handleBlur(event) {
  this.$emit('blur', event); // 觸發(fā) blur 事件
  this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]); // 向父組件派發(fā) el.form.blur 事件
 },
}

loading

loading會(huì)根據(jù)計(jì)算屬性validating來決定是否渲染。

computed: {
 validating() {
  return this.$parent.validateState === 'validating';
 }
},

<i class="el-input__icon el-icon-loading" v-if="validating"></i>

后置元素

后置元素只能根據(jù)具名slot傳入。

<div class="el-input-group__append" v-if="$slots.append">
 <slot name="append"></slot>
</div>

Textarea

如果type設(shè)置為textarea則會(huì)渲染textarea，上面綁定的都和input類似，不再多說，多了一個(gè)textareaStyle，是根據(jù)calcTextareaHeight計(jì)算出來的。

<textarea
 v-else
 class="el-textarea__inner"
 :value="currentValue"
 @input="handleInput"
 ref="textarea"
 :name="name"
 :placeholder="placeholder"
 :disabled="disabled"
 :style="textareaStyle"
 :readonly="readonly"
 :rows="rows"
 :form="form"
 :autofocus="autofocus"
 :maxlength="maxlength"
 :minlength="minlength"
 @focus="handleFocus"
 @blur="handleBlur">
</textarea>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: