qimall/backend/views/components/common/diy/style-components/diy-confirm-popup.php

<template id="diy-confirm-popup">
    <div class="diy-confirm-popup" :style="popStyle" v-show="show">
        <div class="popup-title">{{ title }}</div>
        
        <div flex="cross:center main:center">
            <el-button v-if="showConfrimBtn" type="primary" size="mini" @click.stop="confirm">{{ confirmText }}</el-button>
            <el-button v-if="showCancelBtn" size="mini" plain @click.stop="cancel">{{ cancelText }}</el-button>
        </div>
    </div>
</template>

<script>
    Vue.component('diy-confirm-popup', {
        name: "diy-confirm-popup",
        props: {
            title: { // 弹窗标题
                type: String,
                default: '确定删除吗'
            },
            show: { // 是否展示弹窗
                type: Boolean,
                default: false
            },
            popStyle: { // 弹窗最外层自定义样式
                type: Object,
                default: () => {
                    return {}
                }
            },
            showConfrimBtn: { // 是否展示确定按钮
                type: Boolean,
                default: true
            },
            showCancelBtn: { // 是否展示取消按钮
                type: Boolean,
                default: true
            },
            confirmText: { // 确定按钮文字
                type: String,
                default: '确定'
            },
            cancelText: { // 取消按钮文字
                type: String,
                default: '取消'
            }
        },
        template: '#diy-confirm-popup',
        methods: {
            confirm() {
                this.$emit('confirm')
            },
            cancel() {
                this.$emit('close')
            }
        }
    })
</script>

<style>
    .diy-confirm-popup {
        position: absolute;
        top: 20px;
        right: 15px;
        width: 120px;
        height: 64px;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 12px;
        box-shadow: 0 0 8px rgb(0 0 0 / 10%);
        text-align: center;
        z-index: 15;
        background: #fff;
        cursor: pointer;
    }
    .popup-title {
        color: #999;
        text-align: center;
        line-height: 34px;
    }
    .diy-confirm-popup .el-button--primary {
        color: var(--primary);
        background-color: transparent;
    }
    .diy-confirm-popup .el-button--primary:hover {
        border: 1px solid var(--primary)
    }
    .diy-confirm-popup .el-button--mini, .el-button--mini.is-round {
        padding: 4px 10px;
    }
</style>