104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<!--
|
|
通用 确认弹层。
|
|
@author terrfly
|
|
@site https://www.jeequan.com
|
|
@date 2022/11/22 07:30
|
|
-->
|
|
|
|
<template>
|
|
<uni-popup ref="popup" type="bottom" @maskClick="cancelFunc" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
|
|
<view class="tips-wrapper">
|
|
<view class="tips-text"> {{ vdata.title }} </view>
|
|
<view class="tips-text tips-confirm" hover-class="u-cell-hover" hover-stay-time="150" :style="{color: vdata.confirmColor }" @tap="confirmFunc">
|
|
{{ vdata.confirmText || "确认" }}
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="tips-text tips-cancel" hover-class="u-cell-hover" hover-stay-time="150" @tap="cancelFunc">
|
|
{{ vdata.cancelText || "取消" }}
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive,inject } from "vue"
|
|
const wrapperHidden = inject('wrapperHidden')
|
|
const popup = ref(null) //弹窗实例
|
|
const tips = ref("") // 提示语
|
|
|
|
const vdata = reactive({
|
|
title: '',
|
|
confirmText: '',
|
|
cancelText: '',
|
|
confirmColor: '',
|
|
promiseObject: { },
|
|
})
|
|
|
|
function confirmFunc(){
|
|
popup.value.close()
|
|
vdata.promiseObject.resolve()
|
|
}
|
|
|
|
function cancelFunc(){
|
|
popup.value.close()
|
|
vdata.promiseObject.reject()
|
|
}
|
|
function open (title, confirmTextOrExtObject , cancelText ) {
|
|
vdata.title = title
|
|
vdata.confirmText = typeof confirmTextOrExtObject == "string" ? confirmTextOrExtObject : ''
|
|
vdata.cancelText = cancelText
|
|
if(typeof confirmTextOrExtObject == "object" ) {
|
|
Object.assign(vdata,confirmTextOrExtObject)
|
|
}
|
|
popup.value.open()
|
|
|
|
return new Promise( (resolve, reject) => {
|
|
vdata.promiseObject.resolve = resolve
|
|
vdata.promiseObject.reject = reject
|
|
})
|
|
}
|
|
const change = (e) =>{
|
|
if(wrapperHidden){
|
|
wrapperHidden(e.show)
|
|
}
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tips-wrapper {
|
|
overflow: hidden;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
padding-bottom: 60rpx;
|
|
background-color: #fff;
|
|
.tips-text {
|
|
text-align: center;
|
|
height: 110rpx;
|
|
line-height: 110rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.line {
|
|
height: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
.tips-confirm {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-top: 1rpx solid rgba(0, 0, 0, 0.07);
|
|
color: #2980fd;
|
|
font-size: 33rpx;
|
|
}
|
|
.tips-cancel {
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #808080;
|
|
font-size: 33rpx;
|
|
}
|
|
.u-cell-hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
</style>
|