This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

👋 preface

  • The user is God, and to look at components from god’s point of view is to look at components from the user’s point of view.
  • I’ve used a lot of good onesUILibrary, with the time zizi, when it is their turn to build a component library will often go to reference others’ source code.
  • After reading the source code suddenly oh! I could have written it this way, but it’s hard not to wonder how someone came up with this solution. 🤳
  • This series of articles is mainly aimed at students who do not understand or have doubts, so it is relatively basic. Let us stand in the perspective of the user to think about the structure, and see if there is a change in the way to write code.

⌨️ about the Input component

👻 why do we use Input

👨💼 as the user

  • inputInput box is the most common form input control, generally appear in the questionnaire or background system as a component can be expressed.
  • The user needs input box is nothing more than simple and good-looking, if the fancy may be some do not adapt, especially the form inside the government system is the need to be the same color number.

👨💻 as the component library consumer

  • We can see that there are many component librariesInputI believe you are all familiar with it.
  • When we put the component libraryInputWhat do we want the component to look like on our page?
    • Can realize the function of input
    • With nativeinputAll functions of
    • Basic bidirectional binding can be satisfied
    • Additional functionality can be customized on basic requirements (e.g.disable Add ICONS empty ）
  • In a way,InputAlso let us in the production of pages more convenient unified style and function, save a lot of time

⚒️ Building Components

Next, it is possible to use as little code as possible to structure the source code with Element, which is more delicious to eat with element Input source

🔨 Basic shelf

  • To design one like the one aboveInputNo, it’s just a modificationinputThat’s just the style
  • All told, there’s only one4A point
    • Prepare an external container containinginput
    • According to different types of presentationtext textareaType of input box
    • inputYou can use native attributes such as (placeholder)

<template>
  <div class="zl-input">
    <template v-if="type ! == 'textarea'">
      <input ref="input" type="text" class="zl-input__inner" v-bind="$attrs">
    </template>
    <template v-else>
      <textarea ref="textarea"></textarea>
    </template>
  </div>
</template>. <script>export default {
    props: {value: [String.Number].type: {
          type: String.default: 'text'}}}; </script> ...Copy the code
  • The above iselementThe most simpleinputStructure, you can see the subcomponents by resolvingtypeTo distinguish isinputType ortextareaType, these two different types need to be treated differently,v-bind="$attrs"Can there be no inpropsThe attributes that appear are given directly toinputOn such asplaceholderCan be directly used asinputThis article is mainly about the properties ofinputIn fact, there is no difference between them. You can see the specific styleElement style
  • Of course this is just a shelf and we need to add two-way binding and other features.

🎶 Bidirectional binding

  • It’s not just a shelf, we need to record the input value, so we need to use the outside onev-modelthe
  • In the parent component we usev-modelA value is passed in, andv-modelSyntax sugar will treat this value aspropsthevaluePasses to the child component, the child component just passes through$emitTime changes externallyinputEvents will do.
<template>
  <div class="zl-input">
    <template v-if="type ! == 'textarea'">
      <input ref="input" type="text" class="zl-input__inner" v-bind="$attrs" @input="handleInput">
    </template>
    <template v-else>
      <textarea ref="textarea"></textarea>
    </template>
  </div>
</template>...computed: {nativeInputValue() {
       return this.value === null || this.value === undefined ? ' ' : String(this.value); }},watch: {nativeInputValue() {
       this.setNativeInputValue();
     },
   },
   mounted () {
      this.setNativeInputValue();
   },
   methods: {handleInput(event) {
       this.$emit('input', event.target.value);
     },
    getInput() {
      return this.$refs.input || this.$refs.textarea;
    },
    setNativeInputValue() {
      const input = this.getInput();
      if(! input)return;
      if (input.value === this.nativeInputValue) return;
      input.value = this.nativeInputValue; }}...Copy the code
  • The important thing to note here is that we are not doing bidirectional binding as usualinputThe binding:value="xxx"Instead, you manually assign values insetNativeInputValueControl external incomingvalueThe value, I see at the beginningelementSource code when I was also very confused? Why do you do that, just use it:valueWouldn’t it be more convenient to end up in aissuesI found the answer.

  • It basically meanselementtheinputThe component has some processing before and after the input, and that processing is similar to:value“Mode conflicts, and finally changed to manual assignment if we didn’t write our own componentbugIf you can use either method, consider it a method you’ve learned.
  • So one of our simplestinputAnd you’re done.

🧮 More needs

  • A simple shelf is built and then we can customize our components.
  • For example, disable ah, add icon ah, I believe we are already familiar with, nothing more than through the slot to get throughpropsImplement dynamic style switch.
  • In addition to the style switch, there are also some front content and rear content slots to facilitate the user, and it is not difficult to implement in different places to add named slots.
  • You can also customize a lot of things on events for examplefocus blurThese are all in theinputBind events. See more implementationsportalTo learn ~

👋 is at the end

  • On the wholeInputThe component is relatively simple compared with other complex components. As long as the shelf is constructed, the rest is constant optimization and content. We can also try to write the component together.
  • I am also slowly groping for the building of the component library. What I say is my own sharing, so it may be more basic for the big guy, but I believe that my continuous output can help some students who have doubts.
  • If you feel this article is helpful to your words might as well 🍉 attention + like + favorites + comments + forward 🍉 support yo ~~😛

🌅 past wonderful

Fix echarts map rotation highlighting ⚡

“From God’s Point of view” talk about Element components -Radio

“In God’s eyes” talk about the Element component structure-rate

“In God’s Eyes” talk about the Element component structure -Switch