ELEMENT INPUT component analysis summary

The Input component is relatively complicated, we first analyzed from a tool library CalcTextAreaHeight.js it uses.

CalcTextAreaHeight.js CalcTextAreaHeight.js uses to calculate the height of the text box, and we analyze it from top to bottom according to the order order.


Hidden_Style is a constant, stores a hidden CSS style.

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 is also a constant , Used to store the style name to query.   
const context_style = [‘letter-spacing’, ‘line-height’, ‘padding-top “,’ font-family ‘,’ Font-weight ‘,’ font-size ‘,’ text-rendering ‘,’ Text-Transform’,’ width ‘,’ padding-right ‘,’ border-width ‘,’ Box-Sizing ‘];

CalculatenodesTyling is used to get some styles of nodes.
  Function CalculatenodeStyling (Node) {const style = window.getComputedStyle (Node); // Get the calculated style after the node, that is, the actual rendered style const boxsizing = style.getPropertyValue ( 'box-sizing'); // get the value // box-sizing of the upper and lower padding and const paddingSize = (parseFloat (( 'padding-bottom') style.getPropertyValue) + parseFloat (style.getPropertyValue ( 'padding-top')))))); // The upper frame width and (in fact, it looks high) const bordersize = (Parse.getPropertyValue ('border-bottom-width') + PARSEFLOAT (Style.getPropertyValue 'border-top-width')))))))))))))))))); // Other Styles const conteTyle = context_style .map(Name => $ {name}: $ {style.getpropertyvalue (name)} `) .join (';'); return {contexTyle, PaddingSize, bordersize, boxsizing};}  

CalcTextAreaHeight is a function that is finally exposed to calculate the height of the text domain.

EXPORT DEFAULT FUNCTEXTEXTAREAHEIGHT (TargetNode, // To calculate Node MINROWS = NULL, // Minimum Row MaxRows = NULL / / Maximum Row) { If (! hiddentextArea) {// Create a hidden text domain, all calculations are hiddentextArea = document.createElement (‘textarea’) on this; Document.Body.Appendchild (HiddentextArea);} // Get Some styles node values ​​let {paddingSize, borderSize, boxSizing, contextStyle} = calculateNodeStyling (targetNode); // set the corresponding style hiddenTextarea.setAttribute ( ‘style’, `$ {contextStyle}; $ {HIDDEN_STYLE}`); // Set the content, press the priority once is the value of the value, the node’s PlaceholdeR, and empty string hiddentextArea.value = targetnode.value || targetnode.PlaceHolder || ”; // Get scrolling height let height = hiddentextArea.ScrollHeight; if (BoxSizing === ‘border-box’) {// If it is Border-Box, the high level is added to the border height = height + bordersize;} else if (BoxSizing === ‘content-box’) {// If it is Content-Box, you will lose the up and down inner margin Height = HEIGHT – PADDINGSIZE;} // Calculate the single line height, first empty content hiddentextarea.value = ”; // Re-subtract the upper and lower inner margin let singlerowheight = hiddentextArea.scrollHeight – Paddingsize; if (MinRows! == NULL ) {// If the parameter passes the minroWS let MinHeight = SinglerowHeight * minroWS; / / Description minimum height if (BoxSizing === ‘Border-Box’) {// If it is border-box, you have to Plus the width of the upper and lower margins and upper and lower frames MinHeight = MinHeight + PaddingSize + bordersize;} height = math.max (MinHeight, Height); // Take the maximum value} if (maxRows! == null) {//// If the parameterPassing maxrowHeight * maxRows; // Description can only have such a high degree of 高 (BoxSizing === ‘border-box’) {// If it is border-box, you have to add up and down the inner side Width Maxheight = Maxheight + Paddingsize + Bordersize;} Height = Math.min (MaxHeight, Height); // Take the minimum value} // Return text domain should set the height return {Height: Height + ‘ PX ‘};};
   The INPUT component is more cumbersome, and we have a little analysis. 

When created, INPUTSELECT events will be listened, and the inputselect method is called.

Created () {this. $ ON (‘InputSelect’, this.inputselect);},
The inputselect method will call the original SELECT method of the INPUT on the REFS to select the Input.

Methods: {INPUTSELECT () {this. $ Refs.input.select ();},}


When mount, the ResizTexTarea method is called to set the size of the text domain.

MOUNTED () {this.resiztextarea ();}

 Methods: {resizeTextArea () {if (this. $ isserver) Return; // If the server rendering, return directly, not the following logical var {autosize, type} = this; if (! AutoSize || Type! = = 'textarea') Return; // If autosize is false, or is not the text domain, also directly return const minroWS = autosize.minroWS; // minimum number constant maxrows = autosize.maxrows; // Maximum line number this.TextareAStyle = CalcTextareaHeight (this. $ REFS.TEXTAREA, MINROWS, MAXROWS); // Calculate the height of the text domain, assignment},}   

outermost layer

The outermost layer is a DIV, and some dynamic classes are set.


TYPE is a prop, it is set by default to text, if set to Textarea, indicating that the current text is currently a text.

PrOPS: {type: {type: string, default: ‘text’},}
SIZE is also a prop to set the size of the input box, which is invalid under TextArea.
  PrOPS: {Size: String,}  

Disabled is also a PROP that is used to set whether it is available.

PrOPS: {Disabled: Boolean,}

Prepend, Append
Both are used when setting the input box group, and is placed in the initial and end of the INPUT by the name Slot.

Then, according to the different V-IF, INPUT or TEXTAREA, and let’s analyze the input part first.

Pre-element element

The front element is passed directly through a name Slot.

INPUT icon

The icon is also incorporated by Slot, or ICON in PROP.Pass the icon name.

is also bound to a HandleiconClick Click on the event, it will trigger the Click event:

Methods: {handleiconclick (Event) {this. $ EMIT (‘click “, event);},}

Then is the most important INPUT portion, most of which is propop, not explained, the rest of us will One explanation.


Value SetCurrentValue will be called when changing.

WATCH: {‘Value’ (Val, OldValue) {this.SetCurrentValue (VAL);}},

SetCurrentValue is used to change the current value.

Methods: {setCurrentValue (value) {if (value === this.currentValue) Return; // Return to this. $ Nexttick (_ = > {this.resiztextarea (); // Next DOM update cycleWhen you reset the text domain size}); this.currentValue = value; // Change the current value this. $ EMIT (‘Input’, value); // Trigger Input Event this. $ EMIT (‘Change’, Value); / / Trigger the change event this.dispatch (‘elformitem’, ‘el.form.change’, [value]); / / to the parent’s distribution El.form.change event}}
Processing an input event.
Methods: {Handleinput (Event) {this.SetCurrentValue (event.target.Value); // Change the current value},}


Handlefocus is used to deal with an event that is focused, and the FOCUS event is directly triggered.
  Methods: {Handlefocus (Event) {this. $ EMIT ('FOCUS', Event);},}      Handleblur 
Handleblur is used to handle events that have lost focus.

Methods: {Handleblur (Event) {this. $ EMIT (‘Blur’, Event); // Trigger BLUR Event this.dispatch (‘ elformitem ‘,’ el.form.blur ‘, [this.currentValue]); // Direct El.Form.blur Event to the parent component},}

Loading will determine whether or not to rendering according to the calculation attribute validating. COMPUTED: {Validating () {Return this. $ Parent.validatestate === ‘validating’;}},

Rear element

The post element can only be invested according to the name Slot.


If Type is set to Textarea, you will render textarea, all of which are bound to INPUT, no more, more than a textareAStyle is calculated according to CalcTextAreaHeight.

The above is all the contents of this article, I hope that the learning of everyone has Help, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment