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.
123 lines
2.4 KiB
123 lines
2.4 KiB
<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() |
|
} |
|
break; |
|
case 1: |
|
if(details.cancel){ |
|
details.cancel() |
|
} |
|
break; |
|
case 2: |
|
if(details.success){ |
|
details.success() |
|
} |
|
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; |
|
z-index: 99999; |
|
} |
|
.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>
|
|
|