代码提交
This commit is contained in:
140
components/Modal/index.vue
Normal file
140
components/Modal/index.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<!--
|
||||
@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>
|
Reference in New Issue
Block a user