当前位置：首页 > news >正文

vue 封装一个Dialog组件

news 2025/8/15 0:14:58

基于element-plus封装一个Dialog组件

<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 = falseeditForm.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>