pet-front/components/Modal/index.vue

<template>
    <up-popup :show="show" mode="center" @close="close" @open="open" :zIndex="999999" :round="10"
              :safeAreaInsetBottom="false" :customStyle="{padding:'40rpx 20rpx',width:'80%'}">
        <view>
            <view>
                <view class="content">
                    <slot></slot>
                </view>
                <view class="btn">
                    <view class="cancle" @click="handleCancel">
                        取消
                    </view>
                    <view class="ok" @click="handleConfirm">
                        确定
                    </view>
                </view>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
import { ref, defineEmits } from "vue";

const show = ref(false);
const emits = defineEmits(['confirm', 'cancel']);

const close = () => {
    show.value = false;
};

const open = () => {
    show.value = true;
};

const handleConfirm = () => {
    emits('confirm');
    close();
};

const handleCancel = () => {
    emits('cancel');
    close();
};

defineExpose({
    close,
    open
});
</script>

<style lang="scss" scoped>
.content {
	padding: 20rpx 0rpx;
}

.btn {
    display: flex;
    justify-content: space-between;
}

.cancle,
.ok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 80rpx;
    background: #FFBF60;
    border-radius: 40rpx;
    color: white;
}

.cancle {
    background: #FFF4E6;
    color: #FFC269;
}
</style>