170 lines
3.1 KiB
Vue
170 lines
3.1 KiB
Vue
<template>
|
||
<view v-if="visible" class="popup-mask" @click="handleMaskClick">
|
||
<view class="popup-container" @click.stop>
|
||
<!-- 关闭按钮 -->
|
||
<view v-if="showClose" class="close-btn" @click="handleClose">
|
||
<text>×</text>
|
||
</view>
|
||
|
||
<!-- 弹窗内容 -->
|
||
<image
|
||
v-if="imageUrl"
|
||
class="popup-image"
|
||
:src="imageUrl"
|
||
mode="aspectFit"
|
||
/>
|
||
<view v-if="title" class="popup-title">{{ title }}</view>
|
||
<view v-if="content" class="popup-content">{{ content }}</view>
|
||
<view class="popup-buttons" v-if="showCancel || buttonText">
|
||
<button v-if="showCancel" class="popup-btn cancel" @click="handleClose">取消</button>
|
||
<button v-if="buttonText" class="popup-btn confirm" @click="handleConfirm">{{ buttonText }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Popup',
|
||
props: {
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
imageUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
content: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
buttonText: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
showClose: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showCancel: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
closeOnMask: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
emits: ['close', 'confirm'],
|
||
methods: {
|
||
handleMaskClick() {
|
||
if (this.closeOnMask) {
|
||
this.handleClose()
|
||
}
|
||
},
|
||
handleClose() {
|
||
this.$emit('close')
|
||
},
|
||
handleConfirm() {
|
||
this.$emit('confirm')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.popup-container {
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
width: 300px;
|
||
max-width: 90%;
|
||
|
||
.close-btn {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 20px;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.popup-content {
|
||
font-size: 14px;
|
||
color: #666;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.popup-image {
|
||
width: 100%;
|
||
height: 150px;
|
||
margin-bottom: 10px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.popup-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
|
||
.popup-btn {
|
||
flex: 1;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 15px;
|
||
border-radius: 20px;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&.cancel {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
&.confirm {
|
||
background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|