用element-plus 封装form控件

要使用Element Plus封装表单控件，需要先安装Element Plus库。可以通过npm安装：

npm install element-plus --save

然后，在需要使用表单控件的组件中，引入Element Plus的相关组件和样式：

import { Form, FormItem, Input, Button } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

接下来，可以封装一个自定义的Form组件，使用Element Plus的Form和FormItem组件进行布局和校验：

<template>
  <Form :model="formData" :rules="formRules" ref="form" label-width="80px">
    <FormItem label="姓名" prop="name">
      <Input v-model="formData.name" placeholder="请输入姓名" />
    </FormItem>
    <FormItem label="年龄" prop="age">
      <Input v-model="formData.age" placeholder="请输入年龄" />
    </FormItem>
    <FormItem label="邮箱" prop="email">
      <Input v-model="formData.email" placeholder="请输入邮箱" />
    </FormItem>
    <FormItem>
      <Button type="primary" @click="submitForm">提交</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        email: '',
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，可以提交表单数据
          console.log(this.formData);
        } else {
          // 表单校验不通过
          return false;
        }
      });
    },
  },
};
</script>

以上代码封装了一个简单的表单组件，包含了姓名、年龄和邮箱三个输入框，并对输入进行了校验。点击提交按钮时，会进行表单校验，如果通过校验，会打印出表单数据。

这样就完成了使用Element Plus封装表单控件的过程。你可以根据需要进一步扩展和定制这个组件