Element Input component analysis summary

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
`;

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'
];

function calculateNodeStyling(node) {
 const style = (node); // Get the calculated style of the node, that is, the actual rendering style
 const boxSizing = ('box-sizing'); // Get the value of box-sizing
 // The sum of paddings on the upper and lower const paddingSize = (
  parseFloat(('padding-bottom')) +
  parseFloat(('padding-top'))
 );

 // The width and width of the upper and lower borders (actually the height that looks) const borderSize = (
  parseFloat(('border-bottom-width')) +
  parseFloat(('border-top-width'))
 );

 // Some other styles const contextStyle = CONTEXT_STYLE
  .map(name => `${name}:${(name)}`)
  .join(';');

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

export default function calcTextareaHeight(
 targetNode, // The node to be calculated minRows = null, // Minimum number of rows maxRows = null // Maximum number of rows) {
 if (!hiddenTextarea) { // Create a hidden text field, all calculations are performed on it  hiddenTextarea = ('textarea');
  (hiddenTextarea);
 }

 // Get some style values ​​of nodes let {
  paddingSize,
  borderSize,
  boxSizing,
  contextStyle
 } = calculateNodeStyling(targetNode);

 // Set the corresponding style ('style', `${contextStyle};${HIDDEN_STYLE}`);
 // Set content, once according to priority, the value of the node, the placeholder of the node, and the empty string  =  ||  || '';

 // Get scrolling height let height = ;

 if (boxSizing === 'border-box') {
  // If it is border-box, the height must be added with a border  height = height + borderSize;
 } else if (boxSizing === 'content-box') {
  // If it is a content-box, it means that the upper and lower margins must be subtracted.  height = height - paddingSize;
 }

 // Calculate the height of a single line and clear the content first  = '';
 // Use the scroll height to subtract the upper and lower inner margins let singleRowHeight =  - paddingSize;

 if (minRows !== null) { // If the parameter is passed minRows  let minHeight = singleRowHeight * minRows; // It means that there should be at least so many rows of heights  if (boxSizing === 'border-box') { // If it is a border-box, you must add the upper and lower inner margins and the width of the upper and lower borders.   minHeight = minHeight + paddingSize + borderSize;
  }
  height = (minHeight, height); // Take the maximum value of both }
 if (maxRows !== null) { // If the parameter is passed maxRows  let maxHeight = singleRowHeight * maxRows; // It means that at most you can only have so many rows of heights  if (boxSizing === 'border-box') { // If it is a border-box, you must add the upper and lower inner margins and the width of the upper and lower borders.   maxHeight = maxHeight + paddingSize + borderSize;
  }
  height = (maxHeight, height); // Take the minimum value of both }

 // Returns the height that the text field should set return { height: height + 'px'};
};

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

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

mounted() {
 ();
}

methods: {
 resizeTextarea() {
  if (this.$isServer) return; // If it is server rendering, return directly without performing the following logic  var { autosize, type } = this;
  if (!autosize || type !== 'textarea') return; // If autosize is false, or is not currently a text field, it will also be returned directly  const minRows = ; // Minimum number of rows  const maxRows = ; // Maximum number of rows
   = calcTextareaHeight(this.$, minRows, maxRows); // Calculate the height of the text field and assign values },
}

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

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

props: {
 size: String,
}

props: {
 disabled: Boolean,
}

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

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

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

<input
 v-if="type !== 'textarea'"
 class="el-input__inner"
 :type="type" // type :name="name" // name :placeholder="placeholder" // default value :disabled="disabled" // Whether to disable :readonly="readonly" // Whether to read only :maxlength="maxlength" // Maximum length of input :minlength="minlength" // The minimum length of input (not supported for the time being) :autocomplete="autoComplete" // Automatic completion :autofocus="autofocus" // Autofocus :min="min" // Minimum value allowed (number or date) :max="max" // The maximum value allowed to enter (number or date) :form="form" // The bound form (not native) :value="currentValue" // Enter value ref="input" // Quote @input="handleInput" // Enter an event @focus="handleFocus" // Get focus events @blur="handleBlur" // Lost focus event>

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

methods: {
 setCurrentValue(value) {
  if (value === ) return; // If the old and new values ​​are consistent, return directly
  this.$nextTick(_ => {
   (); // Reset the text field size during the next DOM update cycle  });

   = value; // Change the current value  this.$emit('input', value); // Trigger input event  this.$emit('change', value); // Trigger change event  ('ElFormItem', '', [value]); // Dispatch events to parent }
}

methods: {
 handleInput(event) {
  (); // Change the current value },
}

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

methods: {
 handleBlur(event) {
  this.$emit('blur', event); // Trigger the blur event  ('ElFormItem', '', []); // Send events to the parent component },
}

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

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

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

<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>