封装
<template><div><el-dialog v-model="dialogVisible" :title="title" :width="width" :fullscreen="fullscreen" :top="top":close-on-click-modal="closeOnClickModal" :draggable="draggable" :overflow="overflow":destroy-on-close="destroyOnClose" :center="center"><div><slot></slot></div><template #footer><div class="dialog-footer"><el-button @click="close">取消</el-button><el-button type="primary" @click="ConfirmBtn" :loading="loading">{{ confirmText }}</el-button></div></template></el-dialog></div>
</template><script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({title: {type: String,default: '标题'},width: {type: String,default: '45%'},fullscreen: {type: Boolean,defult: false},top: {type: String,default: '15vh'},closeOnClickModal: {type: Boolean,defult: false},destroyOnClose: {type: Boolean,defult: false},draggable: {type: Boolean,defult: false},overflow: {type: Boolean,defult: false},center: {type: Boolean,defult: false},confirmText: {type: String,default: '确认'},})
const dialogVisible = ref(false)
const loading = ref(false)//打开loading
const openLoading = () => {loading.value = true
}
//关闭loading
const closeLoading = () => {loading.value = false
}
const emit = defineEmits(['submit'])// 打开
const open = () => {dialogVisible.value = true
}//关闭
const close = () => {dialogVisible.value = false
}//确认操作
const ConfirmBtn = () => {emit('submit')
}defineExpose({open,close,openLoading,closeLoading,
})</script><style lang="scss" scoped></style>
使用
<template><div>首页<el-button @click="open">打开</el-button><DialogVue ref="DialogVueRef" title="打开弹框" @submit="submitBtn">1111111</DialogVue></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import DialogVue from '@/components/Dialog/index.vue'
const DialogVueRef = ref(null)
const open=()=>{DialogVueRef.value?.open()
}
const submitBtn = ()=>{// 开启loadingDialogVueRef.value?.openLoading()// 执行确认的操作// 关闭loadingDialogVueRef.value?.closeLoading()}
</script><style lang="scss" scoped></style>
