zhapp/components/uni-PopupMessage/uni-PopupMessage.vue

<template>
	<view class='uni-page'>
		<u-popup :show="modelshow" @close="close" :closeable="closeable" round="10rpx" :bgColor="bgColor" :mode="mode"
			:customStyle="{width:width}">
			<view class="dis f-c ">
				<!-- 头部自定义 -->
				<view class="header dis a-c j-c" :class="{borderBottom:border}" :style="headerStyle">
					<text>{{headerTitle}}</text>
				</view>
				<!-- 内容区插槽 -->
				<view class="content" :style="{overflow:overflow,maxHeight:maxHeight}">
					<slot name="content">
					</slot>
				</view>
				<!-- 弹窗底部统一样式 -->
				<view class="footer dis a-c j-s ">
					<view class="btn dis a-c j-c " @tap="cancelEvent">
						{{cancelText}}
					</view>
					<view class="btn dis a-c j-c " @tap="confirmEvent">
						{{confirmText}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: {
			// 标签数据
			tabList: {
				type: Array,
				default: () => []
			},
			// 当前激活标签
			show: {
				type: Boolean,
				default: false
			},
			// 标题文字自定义
			headerTitle: {
				type: String,
				default: '提示',
			},
			// 取消按钮文字自定义
			cancelText: {
				type: String,
				default: '取消',
			},
			// 确认按钮文字自定义
			confirmText: {
				type: String,
				default: '确认',
			},
			bgColor: {
				type: String,
				default: '#FFF'
			},
			overflow: {
				type: String,
				default: '',
			},
			maxHeight: {
				type: String,
				default: ''
			},
			border: {
				type: Boolean,
				default: false,
			},
			headerStyle: Object,
			closeable: {
				type: Boolean,
				default: false,
			},
			//弹出方向
			mode: {
				type: String,
				default: 'center' //top / right / bottom / center
			},
			//弹窗宽度
			width: {
				type: String,
				default: '75%'
			}
		},
		data() {
			return {
				modelshow: this.show
			}
		},
		onShow() {

		},
		onLoad() {

		},
		watch: {
			show(newVal) {
				this.modelshow = newVal
			}
		},
		methods: {
			//弹窗关闭事件
			close() {
				this.$emit('close')
			},
			cancelEvent() {
				this.$emit('cancelEvent')
			},
			confirmEvent() {
				this.$emit('confirmEvent')
			},
		}
	}
</script>
<style lang='scss' scoped>
	.header {
		padding: 30rpx 40rpx 0;
		box-sizing: border-box;
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.borderBottom {
		border-bottom: 1px solid #EEEEEE;
	}

	.content {
		padding: 20rpx 40rpx 30rpx;
		box-sizing: border-box;
		color: #666;
		font-size: 30rpx;
	}

	.footer {
		border-top: 1rpx solid #EEEEEE;

		.btn {
			flex: 1;
			/* 等分宽度 */
			padding: 24rpx;
			font-size: 30rpx;
			color: #333;
		}

		:first-child {
			border-right: 1rpx solid #EEEEEE;
			color: #666;
		}

		:last-child {
			font-weight: bold;
		}
	}
</style>