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 ones
UI
Library, 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
input
Input 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 libraries
Input
I believe you are all familiar with it. - When we put the component library
Input
What do we want the component to look like on our page?- Can realize the function of input
- With native
input
All 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,
Input
Also 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 above
Input
No, it’s just a modificationinput
That’s just the style - All told, there’s only one
4
A point- Prepare an external container containing
input
- According to different types of presentation
text
textarea
Type of input box input
You can use native attributes such as (placeholder
)
- Prepare an external container containing
<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 is
element
The most simpleinput
Structure, you can see the subcomponents by resolvingtype
To distinguish isinput
Type ortextarea
Type, these two different types need to be treated differently,v-bind="$attrs"
Can there be no inprops
The attributes that appear are given directly toinput
On such asplaceholder
Can be directly used asinput
This article is mainly about the properties ofinput
In 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 one
v-model
the - In the parent component we use
v-model
A value is passed in, andv-model
Syntax sugar will treat this value asprops
thevalue
Passes to the child component, the child component just passes through$emit
Time changes externallyinput
Events 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 usual
input
The binding:value="xxx"
Instead, you manually assign values insetNativeInputValue
Control external incomingvalue
The value, I see at the beginningelement
Source code when I was also very confused? Why do you do that, just use it:value
Wouldn’t it be more convenient to end up in aissuesI found the answer.
- It basically means
element
theinput
The 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 componentbug
If you can use either method, consider it a method you’ve learned. - So one of our simplest
input
And 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 through
props
Implement 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 example
focus
blur
These are all in theinput
Bind events. See more implementationsportalTo learn ~
👋 is at the end
- On the whole
Input
The 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