uniapp-shikongwang/components/my-uni-modal/my-uni-modal.vue

<template>
	<!-- 弹窗 -->
	<view class="cu-modal" :class="modalShow?'show':''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">{{title}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding-xl text-gray">
				{{content}}
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn line-gray text-orange" @tap="hideModal" v-if="isSancel">取消</button>
					<button class="cu-btn bg-gradual-red margin-left text-white" @tap="BtnClick">{{btnText}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '温馨提示',
			},
			content: {
				type: String,
				default: '',
			},
			btnText: {
				type: String,
				default: '确定',
			},
			modalShow: {
				type: Boolean,
				default: false
			},
			//是否显示取消按钮
			isSancel: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},

		methods: {
			//确认
			BtnClick() {
				this.$emit('determine')
			},
			//隐藏弹窗
			hideModal() {
				this.$emit('hideModal')
			},
		}
	}
</script>

<style scoped>

</style>