vue 封装一个Dialog组件

这篇具有很好参考价值的文章主要介绍了vue 封装一个Dialog组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基于element-plus封装一个Dialog组件文章来源地址https://www.toymoban.com/news/detail-707659.html

<template>
    <section class="dialog-wrap">
        <el-dialog 
	        :title="title" 
	        v-model="visible" 
	        :close-on-click-modal="false">
            <section class="content-wrap">
                <Form 
	                :propList="props.propList" 
	                ref="editForm"
	                @close="cancel">
               	</Form>
            </section>
            <template #footer>
                <MyButton @click="cancel">取消</MyButton>
                <MyButton type="primary" @click="confirm">确定</MyButton>
            </template>
        </el-dialog>
    </section>
</template>

<script setup>
import { ref, reactive, toRefs, watch, inject } from 'vue'
import MyButton from '@/components/MyButton.vue';
import Form from '@/components/Form.vue'

const visible = ref(false)

const { title } = inject('formObj')

const propList = ref([
     {
         id: 1,
         type: 'input',
         label: '姓名',
         prop: 'name',
         width: '100%',
         placeholder: '请输入姓名',
         disabled: false,
         show: true,
     },
     {
         id: 2,
         type: 'input',
         label: '用户名',
         prop: 'username',
         width: '100%',
         placeholder: '请输入用户名',
         disabled: false,
         show: true,
     },
     {
         id: 3,
         type: 'input',
         label: '联系电话',
         prop: 'phone',
         width: '100%',
         placeholder: '请输入联系电话',
         disabled: false,
         show: true,

     },
     {
         id: 4,
         type: 'input',
         label: '网址',
         prop: 'website',
         width: '100%',
         placeholder: '请输入网址',
         disabled: true,
         show: true,
     },
     {
         id: 5,
         type: 'input',
         label: '邮箱',
         prop: 'email',
         width: '100%',
         placeholder: '请输入邮箱地址',
         disabled: false,
         show: true,
     }
 ])

const props = defineProps({
    propList: {
        type: Array,
        default: []
    }
    // formData: {
    //     type: Object,
    //     default: () => { }
    // },
    // title: {
    //     type: String,
    //     default: '',
    //     required: true
    // }
})

const editForm = ref()

watch([() => props.formData, () => props.title], ([newFormData, newTitle]) => {
    // if (props.title === '编辑') {
    //     formData.value = newFormData
    // }
})

// const data = reactive({
//     formData: {
//         name: '',
//         username: '',
//         phone: '',
//         website: '',
//         email: ''
//     }
// })

const cancel = () => {
    visible.value = false
    editForm.value.resetForm()
}

// 提交表单
const confirm = async () => {
    editForm.value.formValidate()
}

const openDialog = () => {
    visible.value = true
}

// const { formData } = toRefs(data)

defineExpose({
    openDialog
})

</script>
<style lang="scss" scoped>
.dialog-wrap {
    padding: 5px;
    .content-wrap {
        margin: 5px;
    }
    .footer {
        margin: 5px;
    }
}
</style>