弹窗组件的封装 ​

<template>
    <div>
        <el-button @click="openDialog">打开弹窗</el-button>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :width="width"
            :before-close="handleClose"
        >
            <div v-if="contentSlot">
                <slot name="content"></slot>
            </div>
            <div v-else>
                {{ content }}
            </div>
            <span v-if="footerSlot" slot="footer" class="dialog-footer">
                <slot name="footer"></slot>
            </span>
            <span v-else slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmClick">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    // 弹窗标题
    title: {
        type: String,
        default: '提示'
    },
    // 弹窗内容
    content: {
        type: String,
        default: ''
    },
    // 弹窗宽度
    width: {
        type: String,
        default: '50%'
    },
    // 是否使用插槽内容
    contentSlot: {
        type: Boolean,
        default: false
    },
    // 是否使用插槽底部
    footerSlot: {
        type: Boolean,
        default: false
    }
});

const emits = defineEmits(['confirm']);

const dialogVisible = ref(false);

const openDialog = () => {
    dialogVisible.value = true;
};

const handleClose = (done) => {
    done();
};

const confirmClick = () => {
    emits('confirm');
    dialogVisible.value = false;
};
</script>

<template>
    <div>
        <el-button @click="openDialog">打开弹窗</el-button>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :width="width"
            :before-close="handleClose"
        >
            <div v-if="contentSlot">
                <slot name="content"></slot>
            </div>
            <div v-else>
                {{ content }}
            </div>
            <span v-if="footerSlot" slot="footer" class="dialog-footer">
                <slot name="footer"></slot>
            </span>
            <span v-else slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmClick">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    // 弹窗标题
    title: {
        type: String,
        default: '提示'
    },
    // 弹窗内容
    content: {
        type: String,
        default: ''
    },
    // 弹窗宽度
    width: {
        type: String,
        default: '50%'
    },
    // 是否使用插槽内容
    contentSlot: {
        type: Boolean,
        default: false
    },
    // 是否使用插槽底部
    footerSlot: {
        type: Boolean,
        default: false
    }
});

const emits = defineEmits(['confirm']);

const dialogVisible = ref(false);

const openDialog = () => {
    dialogVisible.value = true;
};

const handleClose = (done) => {
    done();
};

const confirmClick = () => {
    emits('confirm');
    dialogVisible.value = false;
};
</script>

<template>
    <div>
        <CustomDialog
            title="示例弹窗"
            content="这是一个示例弹窗内容"
            @confirm="handleConfirm"
        ></CustomDialog>

        <CustomDialog
            title="自定义内容弹窗"
            contentSlot
        >
            <template #content>
                <div>
                    <h3>自定义内容</h3>
                    <p>这里可以放置任何自定义内容</p>
                </div>
            </template>
            <template #footer>
                <div>
                    <el-button @click="handleCustomCancel">自定义取消</el-button>
                    <el-button type="primary" @click="handleCustomConfirm">自定义确定</el-button>
                </div>
            </template>
        </CustomDialog>
    </div>
</template>

<script setup>
import CustomDialog from './CustomDialog.vue';
import { ref } from 'vue';

const handleConfirm = () => {
    console.log('确认按钮被点击');
};

const handleCustomCancel = () => {
    console.log('自定义取消按钮被点击');
};

const handleCustomConfirm = () => {
    console.log('自定义确定按钮被点击');
};
</script>

<template>
    <div>
        <CustomDialog
            title="示例弹窗"
            content="这是一个示例弹窗内容"
            @confirm="handleConfirm"
        ></CustomDialog>

        <CustomDialog
            title="自定义内容弹窗"
            contentSlot
        >
            <template #content>
                <div>
                    <h3>自定义内容</h3>
                    <p>这里可以放置任何自定义内容</p>
                </div>
            </template>
            <template #footer>
                <div>
                    <el-button @click="handleCustomCancel">自定义取消</el-button>
                    <el-button type="primary" @click="handleCustomConfirm">自定义确定</el-button>
                </div>
            </template>
        </CustomDialog>
    </div>
</template>

<script setup>
import CustomDialog from './CustomDialog.vue';
import { ref } from 'vue';

const handleConfirm = () => {
    console.log('确认按钮被点击');
};

const handleCustomCancel = () => {
    console.log('自定义取消按钮被点击');
};

const handleCustomConfirm = () => {
    console.log('自定义确定按钮被点击');
};
</script>