<template> <Com></Com> </template> <script setup lang="jsx"> const Com = () => { return ( <> 哈哈 </> ) } </script> 结合element plus 表单 写一个示例

在 Vue 3 的 `.vue` 文件中使用 JSX 语法结合 Element Plus 实现表单组件时，需要确保项目已经正确配置了 JSX 支持，并且安装了 Element Plus。以下是完整的实现示例。 ### 配置 JSX 支持 确保项目中已经安装了 `@vitejs/plugin-vue-jsx` 插件，用于支持 JSX 语法。如果使用 Vite 构建工具，可以通过以下命令安装： ```bash npm install @vitejs/plugin-vue-jsx --save-dev ``` 然后在 `vite.config.js` 中启用 JSX 支持： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vue(), vueJsx() ] }) ``` ### 创建表单组件 在 `.vue` 文件中，通过 JSX 语法结合 Element Plus 组件实现一个表单组件。以下是一个示例代码： ```vue <script setup> import { ref } from 'vue' import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus' </script> <template> <el-form :model="formData" label-width="120px" @submit.prevent="onSubmit"> <el-form-item label="姓名"> <el-input v-model="formData.name" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="formData.email" /> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { name: '', email: '' } } }, methods: { onSubmit() { console.log('提交表单数据:', this.formData) } } } </script> ``` 上述代码中，通过 `ElForm`、`ElFormItem`、`ElInput` 和 `ElButton` 等 Element Plus 组件构建了一个简单的表单界面，并通过 `v-model` 实现了数据双向绑定。表单提交时会触发 `onSubmit` 方法并输出当前数据到控制台。 ### 使用 JSX 语法 如果希望使用 JSX 语法直接编写表单内容，可以修改 `<template>` 部分为 JSX 写法： ```jsx <script setup> import { ref } from 'vue' import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus' </script> <template> <el-form :model="formData" label-width="120px" @submit.prevent="onSubmit"> <el-form-item label="姓名"> <el-input v-model="formData.name" /> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="formData.email" /> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { name: '', email: '' } } }, methods: { onSubmit() { console.log('提交表单数据:', this.formData) } } } </script> ``` ### 注意事项 - 在 Vue 3 中使用 JSX 时，需要确保项目构建工具支持 JSX 插件，例如 `@vitejs/plugin-vue-jsx`。 - Element Plus 的组件需要按需导入，或者在全局注册。 - 表单提交时，可以通过 `@submit.prevent` 阻止默认提交行为，并通过 `onSubmit` 方法处理数据。 ###