- Encapsulate the el-button component through the native button
- Encapsulate common components of el-form related forms
- Encapsulate common components of el-table related tables
Vite + Vue3 + ElementPlus business component packaging
digital management platform
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
personal blog address
Development environment : Vite3+ Vue3
- Compatibility: Vite requires Node.js version 14.18+, 16+. However, some templates require a higher version of Node to run properly. When your package manager warns you, please upgrade your version of Node.
- Vue3 adopts composition API
1. Encapsulate the el-button component through the native button
Component functional style:
- Attribute size: set button size, attribute value small | medium (default) | large
- Attribute type: set button theme color, attribute value primary | success | info | warning | danger
- Attribute round: set the rounded border of the button, Boolean value
- Attribute plain: set button hollow effect, Boolean value
- Attribute disabled: Set the button to disable the effect, Boolean value
- Attribute loading: set the loading effect of the button, Boolean value
- Attribute suffixIcon: set the button text tail icon
- Attribute prefixIcon: set the button text header icon
- Method btn-click: Define button click event
2. Encapsulate common components of el-form related forms
After learning the encapsulation idea of the button, think about a question? Obviously, they have provided a relatively complete UI component library, and most of the desired effects are already available. We don't need to waste time on this. We should pay more attention to the realization of business logic.
However, in some non-customized scenarios, the page processing logic is similar, and the UI display is also similar. For example: the page of the background management system has some form addition, deletion and modification operations. The control names are different from the controls used, but the logic is roughly the same. So if you can encapsulate these form controls on this basis, and only need to configure the data in the code, it would be really cool.
This is what we will see below, based on the Element Plus component library, to make a general package for the form.
2.1 Form component configuration object options related properties
| Attributes | describe | value | Remark |
|---|---|---|---|
| size | Defines the size of all controls that the form wraps | “small”、“default”、“large” | |
| formWidth | The form occupies the width of the parent element | percentage, pixel value | |
| labelWidth | label length | Pixel values |
2.2 Common properties of each control
| Attributes | describe | value | Remark |
|---|---|---|---|
| type | optional. form control type | input (default), radio, checkbox, select, datePicker, upload | |
| label | must pass. label text content | string | |
| prop | must pass. Specify form field attributes (key information bound to subsequent field configurations) | string | |
| controlWidth | optional. form control length | Fixed value, percentage | |
| required | optional. Verify required fields | boolean | |
| rules | optional. Set rules form validation rules for each form-item individually | [{…items}] | Keep the original configuration |
| password | optional. Is it a password input box | boolean | |
| required | optional. Is it required | boolean | |
| validateType | optional. Validation type (built-in) | “phone”、“email”、“pwd"、”id_card“、“number”、“int”、“float” | |
| placeholder | optional. placeholder when the control has no content | string |
2.3 Form events
formSubmit form submission
resetForm form reset
formBack returns to the previous page
2.4 radio's
| Attributes | describe | value | Remark |
|---|---|---|---|
| size | Define the size of the control | “small”、“default”、“large” | RadioGroup |
| border | Whether to display the border | boolean |
Radio |
| radioItems | Single option configuration data | [{ label:’ ‘, …}, {label:’ ', …} , …] |
2.5 checkboxes
| Attributes | describe | value | Remark |
|---|---|---|---|
| size | Define the size of the control | “small”、“default”、“large” | CheckboxGroup |
| border | Whether to display the border | boolean |
Checkbox |
| radioItems | Check configuration data | [{ label:’ ‘, …}, {label:’ ', …} , …] |
2.6 Others
There are also things like select drop-down box, datepicker time selection, upload upload, etc. I won’t list them one by one
Three, ### form
Tables are also frequently used components in background management systems. They display multiple pieces of data with similar structures, and can sort, filter, compare or perform other custom operations on the data. . With the basis of encapsulating the form earlier, if the form is also encapsulated, then we can save more time to deal with other things when dealing with this type of addition, deletion, modification and query pages, thereby improving development efficiency.
What you see above are all integrated into this component. Of course, we are still continuing to improve things
like table data configuration, operation column, batch processing, paging, column data personalization, etc. If there are too many, it will not Listed one by one. If you need to help you reduce the pressure of development, please private message or contact us at the bottom! ! !
Any valuable suggestions and opinions can also be put forward! ! !