组件化对话框

引用处

<template>
<!--    利用obj传递参数-->
    <Dialog :obj="data.permissionDialog" ref="permissionDialog"/>
</template>
<script setup>
import Dialog from "@/components/Dialog.vue";
const data = reactive(
    {
       permissionDialog: {
            show: false,
            title: '添加权限',
            form: {
                title: '',
                name: '',
                method: "",
                router: 0
            },
            fields: [
                {
                    label: '权限名',
                    prop: 'title',
                    type: 'input',
                    placeholder: '请输入权限名',
                    required: true
                },
                {
                    label: '权限',
                    prop: 'name',
                    type: 'input',
                    placeholder: '请输入权限',
                    required: true,
                },
                {
                    label: '请求方式',
                    prop: 'method',
                    type: 'select',
                    placeholder: '请选择请求方式',
                    required: true,
                    ext: false,
                    options: [
                        {label: 'GET', value: '1'},
                        {label: 'POST', value: '2'},
                        {label: 'PUT', value: '3'},
                        {label: 'DELETE', value: '4'},
                        {label: 'PATCH', value: '5'},
                    ],
                }
            ],
            errors: {
                title: '',
                name: '',
                method: '',
            },
            submit: permissionSubmit
        }
    }
)
</script>

子组件

<template>
    <el-dialog
            v-model="obj.show"
            :title="obj.title"
            width="30%"
            :before-close="closeDialog"
    >
        <el-form
                :model="obj.form"
                ref="formRef"
        >
            <el-form-item v-for="field in obj.fields" :label="field.label" :prop="field.prop"
                          :error="obj.errors[field.prop]" :required="field.required">
                <el-input v-if="field.type==='input'" v-model="obj.form[field.prop]" :placeholder="field.placeholder"/>
                <el-select v-else-if="field.type==='select'" v-model="obj.form[field.prop]"
                           :placeholder="field.placeholder">
                    <el-option
                            v-for="item in field.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                        <div class="option_box" v-if="field.ext">
                            <div style="display: flex;align-items: center;justify-content: space-between">
                                <el-icon>
                                    <component :is="item.value"></component>
                                </el-icon>
                                <span v-text="item.label"></span>
                            </div>

                        </div>
                    </el-option>
                </el-select>
                <el-switch v-else-if="field.type==='switch'" v-model="obj.form[field.prop]"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {defineProps, onMounted, ref} from 'vue'

const props = defineProps(['obj'])
const formRef = ref(null)
const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            props.obj.submit()
        } else {
            return false
        }
    })
}


function closeDialog(done) {
    formRef.value.resetFields()
    props.obj.show = false
    done()
}

function close() {
    formRef.value.resetFields()
    props.obj.show = false
}

defineExpose({close})
</script>