vue 封装Form 表单组件

基于element-plus封装一个表单组件

在components目录下新建一个Form.vue

javascript 复制代码
<template>
    <section class="form-wrap">
        <el-form 
	        :model="formDatas" 
	        label-width="100" 
	        label-position="right" ref="form" 
	        :rules="rules">
            <el-row :gutter="8">
                <template v-for="item in propList" :key="item.id">
                    <el-col :span="8">
                        <el-form-item 
	                        v-if="item.show" 
	                        :key="item.id" 
	                        :prop="item.prop" 
	                        :label="item.label">
                            // input
                            <el-input 
	                             v-else="item.type == 'input'"
	                             v-model="formDatas[item.prop]"
	                            :placeholder="item.placeholder" 
	                            :disabled="item.disabled" 
	                            :style="{ width: item.width }"
	                            clearable>
	                         </el-input>
                            // select
                            <el-select 
                            	v-if="item.type == 'select'"
                                v-model="formDatas[item.prop]"
                                :placeholder="item.placeholder" 
                                :style="{ width: item.width }" 
                                clearable>
                                <el-option 
	                                v-for="option in item.options" 
	                                :label="option.label" 
	                                :value="option.value"
                                    :key="option.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
            // 插槽
            <slot></slot>
        </el-form>
    </section>
</template>

<script setup>
import { ref, reactive, toRefs, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref(null)

const emits = defineEmits(['close'])

const data = reactive({
    formDatas: {}
})

// 因为是在Dialog组件中的 form 所以通过依赖注入的方式通信
// 解构注入的属性
const { title, formData, addData } = inject('formObj')

onMounted(() => {
    const dataForm = formData
    formDatas.value = dataForm
})

// 定义表单属性校验
const rules = reactive({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
})

const { formDatas } = toRefs(data)
// 表单验证
const formValidate = async () => {
    await form.value.validate((valid, fields) => {
        if (valid) {
            const editFormData = formDatas.value
            addData(editFormData)
            if (title === '编辑') {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
            }
            emits('close')
        }
    })
}

function resetForm() {
    form.value.resetFields()
}

defineProps({
    propList: Array,
    formDatas: Object
})

defineExpose({
    formValidate,
    resetForm
})
</script>

<style lang="scss" scoped>
.form-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
}
</style>
相关推荐
子伟-H52 小时前
App开发框架调研对比
前端
桃子不吃李子2 小时前
axios的二次封装
前端·学习·axios
SteveJrong2 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~3 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发3 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii3 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack4 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好4 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O4 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木4 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api