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