141 lines
2.4 KiB
Vue
141 lines
2.4 KiB
Vue
<!--
|
||
@name: index
|
||
@author: kahu4
|
||
@date: 2023-10-31 15:14
|
||
@description：index
|
||
@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>
|