120 lines
2.1 KiB
Vue
120 lines
2.1 KiB
Vue
<template>
|
|
<view class="modal-mask" v-if="show" @click="handleMaskClick">
|
|
<view class="modal-container" @click.stop>
|
|
<view class="modal-title">{{ title }}</view>
|
|
<view class="modal-content">{{ content }}</view>
|
|
<view class="modal-footer">
|
|
<view class="modal-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
|
|
<view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ConfirmModal',
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '提示'
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: '确定'
|
|
},
|
|
maskClose: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleMaskClick() {
|
|
if (this.maskClose) {
|
|
this.$emit('cancel');
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$emit('cancel');
|
|
},
|
|
handleConfirm() {
|
|
this.$emit('confirm');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.modal-container {
|
|
width: 600rpx;
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
padding: 50rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.modal-content {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
padding: 0 30rpx 50rpx;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
border-top: 1rpx solid #eeeeee;
|
|
}
|
|
|
|
.modal-btn {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.cancel-btn {
|
|
color: #666666;
|
|
border-right: 1rpx solid #eeeeee;
|
|
}
|
|
|
|
.confirm-btn {
|
|
color: #C93639;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|