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
<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: 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> |