purchase-let/components/modal.vue

69 lines
1.5 KiB
Vue
Raw Normal View History

2024-04-27 18:02:43 +08:00
<template>
2024-04-28 18:08:57 +08:00
<up-popup :show="show" round="10" @close="close" mode="center" :safeAreaInsetBottom="false">
<view class="m-modal-popup">
<view class="head-title-modal">{{title}}</view>
<view class="content-modal">{{content}}</view>
<view class="btn-box-modal">
2024-05-07 13:39:08 +08:00
<view style="width: 230rpx;"><up-button @click="close" plain color="#999" :throttleTime="800">{{cancleText}}</up-button></view>
<view style="width: 230rpx;"><up-button @click="change" color="#20B128" :throttleTime="800">{{confirmText}}</up-button></view>
2024-04-27 18:02:43 +08:00
</view>
</view>
</up-popup>
</template>
<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: '确认操作吗'
},
content: {
type: String,
default: '确认后继续下一步操作'
},
confirmText: {
type: String,
default: '确认'
},
cancleText: {
type: String,
default: '取消'
},
})
const emit = defineEmits(['close', 'change']);
const close = () => {
emit('close');
}
const change = ()=>{
emit('change');
}
</script>
<style scoped lang="scss">
2024-04-28 18:08:57 +08:00
.m-modal-popup{
2024-04-27 18:02:43 +08:00
width: 500rpx;
padding: 40rpx;
2024-04-28 18:08:57 +08:00
.head-title-modal{
2024-04-27 18:02:43 +08:00
font-size: 32rpx;
text-align: center;
}
2024-04-28 18:08:57 +08:00
.content-modal{
2024-04-27 18:02:43 +08:00
font-size: 26rpx;
color: #999;
text-align: center;
padding: 40rpx 0;
}
2024-04-28 18:08:57 +08:00
.btn-box-modal{
2024-04-27 18:02:43 +08:00
display: flex;
justify-content: space-between;
}
}
</style>