74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 模态框 -->
|
|
<view class="cu-modal" :class="isShow?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl">
|
|
{{content}}
|
|
<slot name="contentView"></slot>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<view v-if="showCancel" class="action margin-0 flex-sub text-black" @tap="hideModal">{{cancelMsg}}</view>
|
|
<view v-if="showConfirm" class="action margin-0 flex-sub text-main-color solid-left" @click="confirmCallback">{{confirmMsg}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'confirm-modal',
|
|
emits: ["confirm", 'cancel'],
|
|
props: {
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
cancelMsg: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
showCancel: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
confirmMsg: {
|
|
type: String,
|
|
default: '确定'
|
|
},
|
|
showConfirm: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
isAutoClose: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false
|
|
}
|
|
},
|
|
methods: {
|
|
showModal(e) {
|
|
this.isShow = true
|
|
},
|
|
hideModal(e) {
|
|
this.$emit('cancel');
|
|
this.isShow = false;
|
|
},
|
|
confirmCallback(e) {
|
|
this.$emit('confirm');
|
|
if(this.isAutoClose) {
|
|
this.isShow = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|