vue3+elementPlus+ts封装form表单组件

在Vue 3和Element Plus中使用TypeScript封装一个表单组件的基本步骤如下：

1. 创建一个新的Vue组件文件，例如MyForm.vue。
2. 使用<template>标签定义表单的HTML结构。
3. 使用<script setup lang="ts">标签开启Composition API。
4. 引入Element Plus的表单组件和必要的Vue组件。
5. 使用ref或reactive创建表单数据模型。
6. 使用ElForm、ElFormItem等组件包裹表单元素，并绑定模型。
7. 提供方法处理表单提交。

以下是一个简单的封装例子：

<template>
  <ElForm :model="formData" @submit.prevent="handleSubmit">
    <ElFormItem label="用户名">
      <ElInput v-model="formData.username" />
    </ElFormItem>
    <ElFormItem label="密码">
      <ElInput type="password" v-model="formData.password" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" native-type="submit">提交</ElButton>
    </ElFormItem>
  </ElForm>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
 
interface FormData {
  username: string;
  password: string;
}
 
const formData = ref<FormData>({
  username: '',
  password: ''
});
 
const handleSubmit = () => {
  console.log(formData.value);
  // 处理表单提交逻辑
};
</script>

这个组件封装了一个带有用户名和密码输入的表单，并提供了一个方法来处理表单提交。使用<script setup>和TypeScript使得代码更加简洁和类型安全。