Files

141 lines
2.4 KiB
Vue
Raw Normal View History

2023-11-14 17:21:03 +08:00
<!--
@name: index
@author: kahu4
@date: 2023-10-31 15:14
@descriptionindex
@update: 2023-10-31 15:14
-->
<script setup>
import Popup from "@/components/Popup/index.vue";
import { ref, toRefs } from "vue";
const props = defineProps({
// 内容
content: {
type: String,
default: () => ''
},
// 确认文字
confirmText: {
type: String,
default: () => '确认'
},
// 取消文字
cancelText: {
type: String,
default: () => '取消'
},
// 是否展示取消
showCancel: {
type: Boolean,
default: () => true
},
// 是否展示提交
showConfirm: {
type: Boolean,
default: () => true
}
})
const {content, confirmText, cancelText, showCancel, showConfirm} = toRefs(props)
const emits = defineEmits(['confirm', 'cancel'])
const popupRef = ref()
function show() {
popupRef.value.show()
}
function close() {
// something before close todo
popupRef.value.close()
}
function clickBtn(type = 'confirm') {
emits(type)
close()
}
defineExpose({show, close})
</script>
<template>
<Popup
ref="popupRef"
:showCloseable="false"
mode="center"
>
<view class="modal-inner">
<view class="content">
<slot>
{{ content }}
</slot>
</view>
<view
class="btn-group"
v-if="showCancel||showConfirm"
>
<view
class="btn cancel"
v-if="showCancel"
@click="clickBtn('cancel')"
>
{{ cancelText }}
</view>
<view
class="btn"
v-if="showConfirm"
@click="clickBtn('confirm')"
>
{{ confirmText }}
</view>
</view>
</view>
</Popup>
</template>
<style
scoped
lang="scss"
>
.modal-inner {
width: 70vw;
padding: 50rpx 40rpx 20rpx 50rpx;
box-sizing: border-box;
.content {
width: 100%;
text-align: center;
font-size: 34rpx;
margin-bottom: 40rpx;
}
.btn-group {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
position: relative;
gap: 30rpx;
.btn {
box-sizing: border-box;
flex: 1 0 40%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #ee6d46;
background: #ee6d46;
color: #fff;
}
.cancel {
background: #fff;
color: #ee6d46;
}
}
}
</style>