59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change='change' :safe-area="false" @maskClick="emits('cancel')">
|
|
<!-- 通用提示弹窗 用于提示用户 数据含义 -->
|
|
<view class="card-wrapper">
|
|
<view class="card-title flex-center">{{ title }}</view>
|
|
<slot />
|
|
<view class="card-button flex-center" hover-class="touch-hover" @tap="confirm"> {{ buttonText }}</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref,inject } from 'vue'
|
|
const emits = defineEmits(['cancel'])
|
|
const props = defineProps({
|
|
title: { type: String }, //标题
|
|
buttonText: { type: String }, //按钮文字
|
|
})
|
|
const popup = ref(null)
|
|
|
|
const open = (val) => {
|
|
popup.value.open()
|
|
}
|
|
const confirm = () => {
|
|
emits('cancel')
|
|
popup.value.close()
|
|
}
|
|
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
|
|
const change = (e)=>{
|
|
if(changePageMetaOverflowFunc){
|
|
changePageMetaOverflowFunc(!e.show)
|
|
}
|
|
}
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-wrapper {
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background-color: #fff;
|
|
padding-bottom: 60rpx;
|
|
max-height: 70vh;
|
|
.card-title {
|
|
margin-bottom: 20rpx;
|
|
height: 110rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
.card-button {
|
|
margin-top: 20rpx;
|
|
height: 110rpx;
|
|
font-size: 32rpx;
|
|
color: #2980fd;
|
|
border-top: 20rpx solid #f7f7f7;
|
|
}
|
|
}
|
|
</style>
|