purchase-let/components/modal.vue

69 lines
1.4 KiB
Vue

<template>
<up-popup :show="show" round="10" @close="close" mode="center">
<view class="modal-popup">
<view class="head-title">{{title}}</view>
<view class="content">{{content}}</view>
<view class="btn-box">
<view style="width: 230rpx;"><up-button @click="close" plain color="#999">{{cancleText}}</up-button></view>
<view style="width: 230rpx;"><up-button @click="change" color="#20B128">{{confirmText}}</up-button></view>
</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">
.modal-popup{
width: 500rpx;
padding: 40rpx;
.head-title{
font-size: 32rpx;
text-align: center;
}
.content{
font-size: 26rpx;
color: #999;
text-align: center;
padding: 40rpx 0;
}
.btn-box{
display: flex;
justify-content: space-between;
}
}
</style>