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>
相关推荐
AI视觉网奇2 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1232 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡5 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh5 小时前
less和sass
前端·less·sass
Nan_Shu_6146 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel7 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登7 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞7 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始8 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible8 小时前
带有渐变光晕
前端·javascript·css