dingdong-mall/components/modal/confirm-modal.vue

<template>
	<view>
		<!-- 模态框 -->
		<view class="cu-modal" :class="isShow?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					{{content}}
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-black" @tap="hideModal">{{cancelMsg}}</view>
					<view 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: '取消'
			},
			confirmMsg: {
				type: String,
				default: '确定'
			}
		},
		data() {
			return {
				isShow: false
			}
		},
		methods: {
			showModal(e) {
				this.isShow = true
			},
			hideModal(e) {
				this.$emit('cancel');
				this.isShow = false;
			},
			confirmCallback(e) {
				this.$emit('confirm');
				this.hideModal();
			}
		}
	}
</script>

<style>
</style>