You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.6 KiB
131 lines
2.6 KiB
10 months ago
|
<template>
|
||
|
|
<view class="bgmab" @click="checkbox(0)" v-if="isshow">
|
||
|
|
<view class="modtips" @click.stop.prevent>
|
||
|
|
<view class="title">
|
||
|
|
{{title||'提示'}}
|
||
|
|
</view>
|
||
|
|
<view class="contents">
|
||
|
|
{{content||'提示内容模板'}}
|
||
|
|
</view>
|
||
|
|
<view class="buts">
|
||
|
|
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取 消'}}</view>
|
||
|
|
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确 认'}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { detailsType } from '@/interfaces/compoment/tips'
|
||
|
|
import { reactive, toRefs } from "vue";
|
||
|
|
let details = reactive<detailsType>({
|
||
|
|
isshow: false,
|
||
|
|
title: '',
|
||
|
|
content: '',
|
||
|
|
isshowcancel: true,
|
||
|
|
cancelTxt: '',
|
||
|
|
confirmTxt: '',
|
||
|
|
success: null,
|
||
|
|
cancel: null,
|
||
|
|
close: null
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['cancel', 'confirm'])
|
||
|
|
function setisshow(value : boolean) {
|
||
|
|
details.isshow = value
|
||
|
|
}
|
||
|
|
function setdetails(value : any) {
|
||
|
|
for (let key in value) {
|
||
|
|
details[key] = value[key]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function checkbox(type : number) {
|
||
|
|
switch (type) {
|
||
|
|
case 0:
|
||
|
|
if (details.close) {
|
||
|
|
details.close()
|
||
|
|
} else details.isshow = false
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
if (details.cancel) {
|
||
|
|
details.cancel()
|
||
|
|
} else details.isshow = false
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
if (details.success) {
|
||
|
|
details.success()
|
||
|
|
} else details.isshow = false
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
defineExpose({ setisshow, setdetails })
|
||
|
|
const { isshow, title, content, isshowcancel, cancelTxt, confirmTxt } = toRefs(details)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bgmab {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
// background-color: #00000050;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modtips {
|
||
|
|
width: 630upx;
|
||
|
|
// height: 63upx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 7upx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 40upx 20upx;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateX(-50%) translateY(-50%);
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 34upx;
|
||
|
|
color: #092C4D;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contents {
|
||
|
|
max-width: 480upx;
|
||
|
|
font-size: 29upx;
|
||
|
|
color: #90A0AF;
|
||
|
|
margin-top: 30upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buts {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-top: 40upx;
|
||
|
|
|
||
|
|
>view {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 260upx;
|
||
|
|
height: 88upx;
|
||
|
|
border-radius: 8upx;
|
||
|
|
font-size: 32upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>.cancel {
|
||
|
|
background-color: #F5F5F6;
|
||
|
|
color: #5A6875;
|
||
|
|
margin-right: 20upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
>.confirm {
|
||
|
|
background-color: #D3832A;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|