Get in the car! Vite + Vue 3 + TSX + Element Plus

“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Pick up where we left off with Vite + Vue 3 + TSX + Element Plus for form configuration (part 1), which implements syntax hints in the editor using JSX and Typescript

Next, I choose the ELEMENT Plus UI library to build the management background, and then how to build the form example

Reference the Element Plus library

Start by installing the Element Plus library

npm install element-plus --save
Copy the code

I then introduced the Element Plus library in the entry file. I chose to use global references, but you can also introduce elements in components as needed

import { createApp } from 'vue';
// Introduce Element Plus
import ElementPlus from 'element-plus';
// Introduce the Element Plus style
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);

// Mount to Vue instance
app.use(ElementPlus);
app.mount('#app');
Copy the code

Form configuration practices

Here I used

The official demo of element Plus library is written in SFC. It was difficult to convert to TSX at first, but with the addition of @vitejs/plugin-vue-jsx, it is still easy to convert the SFC syntax to JSX

Perhaps we should implement a simple form where we can enter two fields, name and age, and verify them

rendering

Complete code file

// form.tsx
import { defineComponent, reactive } from 'vue'
type Info = {
    name: string;
    age: number;
}
const Index = defineComponent({
    setup() {
        const state = reactive({
            form: {
                name: ' '.age: 0
            } as Info
        })
        
        const rule = {
            name: [{required: true.message: 'Please enter a name'.trigger: 'blur'],},age: [{required: true.message: 'Please enter age'.trigger: 'blur',]}}// JSX
        return () = > (
            <el-form model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
              <el-form-item label="Name" prop="name">
                <el-input v-model={state.form.name} maxlength="10"></el-input>
              </el-form-item>
              <el-form-item label="Age" prop="age">
                <el-input v-model={state.form.age} maxlength="10"></el-input>
              </el-form-item>
            </el-form>)}})Copy the code

Matters needing attention

Declare the value of the form with care to initialize, otherwise it will become unresponsive

For example, when we first declare state, we do not initialize the value in the form object. Then when we input the value in the form object, the value in the form object will not be listened to and will not be responsive

/ / error
const state = reactive({
    form: {} as Info
})
Copy the code

The correct declaration should be the values in the form

/ / correct
const state = reactive({
    form: {
        name: ' '.age: 0
    } as Info
})
Copy the code

A pit in which a validation form is invalid

The binding value in the form is not correct

This is a careless bug. I thought that the value passed in the form was v-Model, but I didn’t carefully check it was Model. After locating the problem for a long time, I still had to read the document carefully

/ / error
<el-form v-model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
</el-form>
Copy the code

/ / correct
<el-form model={state.form} rules={rule} label-width="120px" class="ruleForm" size="medium">
</el-form>
Copy the code

If you make a mistake you will like to mention the following error

ElementPlusError: [Form] model is required for validate to work! M: Yes, I want to say model props

El – form – item lack prop

If prop is missing, verification rules do not take effect

// Correct, need prop
<el-form-item label="Name" prop="name">xx</el-form-item>
Copy the code

Here’s an extra tip

If the SFC is used, it is important to ensure that the return value does not become unresponsive, so you need to call the toRefs method to prevent the object from becoming unresponsive during deconstruction

<template>
    {{form.name}}
</template>
<script lang='ts'>
    import { reactive, toRefs } from 'vue'
    export default {
        setup() {
            const state = reactive({
                form: {
                    name: ' '.age: 0}})return {
                ...toRefs(state)
            }
           
        }
    }
</script>
Copy the code

conclusion

The above is my use of Vite + Vue 3 + TSX + Element Plus implementation of the form configuration practice, I hope to help you ~ if you can get a big like ❤ as an encouragement will be very grateful 😄!! You can also exchange ideas in the comments section. Thank you