This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging
In the previous vUE management background table encapsulation, explained how to encapsulate table, this article writes how to encapsulate form. Encapsulating forms can be both difficult and simple. After all, if you encapsulate one form, it is also encapsulating. If you encapsulate many things, it is also encapsulating. At the beginning of this project, I will give a brief introduction. For the time being, I only encapsulate input. In fact, the idea is the same.
Problem analysis
See below:
These are the only inputs that we’re encapsulating.
Component analysis
<el-form ref="form" :model="listQuery" label-width="80px">
<el-form-item label="Name of Shop" style="width:300px; float:left;">
<el-input v-model="listQuery.name" />
</el-form-item>
<el-form-item label="Shop Phone Number" label-width="100px" style="width:300px; float:left;">
<el-input v-model="listQuery.phone" />
</el-form-item>
<el-button type="primary" style="margin-left: 20px;" @click="getStoreList">The query</el-button>
</el-form>
Copy the codeThis is the code for the component I’m using. During encapsulation, we can directly look at the properties given by the el-form component.
The data type
We need to determine the data we need, such as label,type, prop, Function, etc. After thinking, we get the following data structure
form
formName: String
formType: String
formData: Object
const formArr: Array= [{label: Array.type: String.prop: String.size: String.labelWidth: String.placeholder: String.handle: Function}]Copy the codebtn
const btnArr: Array= [{label: String.type: String.handle: Function}]Copy the codeOnce we have identified the data structure, we can type the code and combine the Element component.
Packaging form
Global components
Let’s create our component first. My component name is frform.vue, import it into index.js, and add it to the list of components
import FrForm from './FrForm/index'
const components = [FrForm]
Copy the codeComponent writing
Component analysis
In this component we actually have two types of encapsulation, one is a form, one is a button, and we’ll talk about both.
The form enclosed
We’ve defined the data format, so we need to iterate through it through the for loop, and we’ve given the type, which is for later extension. Here’s the next parameter, formType, which is a form parameter and a select parameter, where form is a popover, and select is where we query, and of course THAT’s how I do it, but if you have any other ideas, feel free to play with them.
<el-form :ref="formName" :model="formData">
<template v-for="(item, index) in formArr">
<el-form-item
:key="index"
:label="item.label"
:label-width="item.labelWidth"
:prop="item.prop"
:style="{ marginLeft: item.marginLeft, float: formType === 'select' ? 'left' : 'none' }"
>
<el-input
v-if="item.type === 'input'"
v-model.trim.lazy="formData[item.prop]"
@keyup.enter.native="item.handle()"
/>
</el-form-item>
</template>
</el-form>
Copy the codeBTN components
There is nothing to say about this component, just label, type, Function, etc
<template v-for="(item, index) in btnArr">
<el-button
:key="index"
:type="item.type"
:disabled="item.disabled"
:size="item.size || size"
style="margin-left: 20px;"
@click="item.handle()"
>
{{ item.label }}
</el-button>
</template>
Copy the codeThe principle is to consider as many parameters as possible. It is better to add all the parameters on the component.
Prop definition
From this, we can directly define the parameters that we pass from the parent component to the global component
formName: {
type: String.default: () = > {
return ' '}},formType: {
type: String.default: () = > {
return 'select'}},formData: {
type: Object.default: () = > {
return{}}},formArr: {
type: Array.default: () = > {
return[]}},btnArr: {
type: Array.default: () = > {
return[]}},size: {
type: String.default: () = > {
return 'small'}}Copy the codeWith the above coding our component is ready to work, all that remains is to call the component on the page
Component invocation
Because it is a global component, we do not need to register it, we can use it directly. The code is as follows
<FrForm
ref="formData"
:form-name="'formData'"
:form-data="formData"
:form-arr="formArr"
:btn-arr="btnArr"
:inline="true"
/>
Copy the codeWe need to write their own parameters can be used normally. So that’s the encapsulation of the form. By the way, we can encapsulate all the content of the form, so we have one big, full content, and the rest is just data. I will add more and more content later, and I will continue to share.
The above is today’s share, there are inadequacies, also please leave a lot of comments to know!! Thank you thank you