Re-encapsulate your component libraries with JSX

The sixth bullet in August, here we go! 🍦

This is the sixth day of my participation in the August Challenge. At present, when we are developing front-end projects, we mostly use various UI libraries to increase our development efficiency, but occasionally components do not meet our expectations and need to be modified. If we have experienced this scenario, we should have been prepared to repackage our components prior to the development of the project. This kind of transformation usually increases our development efficiency and maintainability. However, this transformation also has disadvantages, that is, it requires a certain amount of manpower and time, and the components after secondary packaging need to have development documents. So whether you want to take this advice depends on your project

The development overview

In this case, the form form of vantUI is used for secondary encapsulation. In fact, in daily development, table and form are also one of the components that need encapsulation most, vue-render, VUE-JSX. Students who do not know how to use JSX can go to JSX to view.

create

Create the base folder in the root directory as follows:

Encapsulate input box components

Create ra-field->index. Js in the components folder. Use watch to create a new variable, and then return it to the parent.

import { Field } from 'vant' export default { props: { field: {}, value: '' }, computed: { val: $emit('input', val) {this.value}, set(val) {this.$emit('input', val) render(h) { let { placeholder, label } = this.field return ( <div> <Field v-model={this.val} label={label} placeholder={placeholder}></Field> </div> ) }}Copy the code

Encapsulating form components

Introduce the written Ra-field component and vantUI form component in ra-form->index.js

import { Form } from 'vant' import RaField from './components/ra-field' const { model, ... RestProps} = form. props export default {components: {RaField}, props: {// RestProps, Fields: {type: Array, default: () => []}, // Form value value: {type: Object, default: () => null } }, data() { return { formData: {} } }, computed: { model: { get() { return this.value || this.formData }, set(val) { this.formData = val } } }, render(h) { const { disabled, ... props } = this.$props return ( <div> <Form ref="form" {... { props: { ... props, model: this.model } }} > {this._renderCells(h)} </Form> </div> ) }, methods: Rendercells () {const {fields} = this const fieldEls = fields.map(row => {// remove hidden const newRow = row.filter(field) => field.visible ! == false) if (newRow.length === 0) { return null } return ( <div> {newRow.map(field => { return <RaField v-model={this.model[field.prop]} field={field}></RaField> })} </div> ) }) return fieldEls }, GetFieldValues () {return this.model}}Copy the code

use

registered

Global registration in main.js or standalone import in a single page, where the standalone import component is tested. After secondary encapsulation, components only need to perform simple data configuration, eliminating a large number of DOM modules.

<template> <div> <ra-form ref="form" :fields="fields" /> <van-button size="small" type="primary" @click="getVal"> </van-button> </div> </template> <script> import RaForm from '@/base/ra-form/index' export default { Components: {RaForm}, data() {return {fields: [[{label: 'name', prop: 'name', placeholder: 'please fill in name'}, {label: placeholder Placeholder: 'placeholder ', placeholder:' placeholder ', placeholder: 'placeholder ', placeholder:' placeholder ', placeholder: 'placeholder ', placeholder:' placeholder '}]]}}, placeholder: { getVal() { const res = this.$refs.form.getFieldValues() console.log(res) } } } </script>Copy the code

Demo Project Address

Gitee.com/koukaile/vu…

conclusion

The end of this article, I hope to help you 😉