zhapp/components/uni-Popup/uni-Popup.vue

<template>
	<view class='uni-page'>
		<u-popup :show="modelshow" @close="close" :closeable="closeable" round="20rpx" :bgColor="bgColor" :mode="mode"
			:closeOnClickOverlay="closeOnClickOverlay" :customStyle="{width:width}">
			<view class="">
				<view class="header header-padding dis a-c j-c" v-if="!headerSlot" :class="{borderBottom:border}"
					:style="headerStyle">
					<text>{{headerTitle}}</text>
				</view>
				<view v-else class="header-padding " :class="{borderBottom:border}">
					<slot name="header"></slot>
				</view>
				<view class="content" :style="{overflow:overflow,maxHeight:maxHeight}">
					<slot name="content" v-if="contentType!='status'">
					</slot>
					<view class="quickOptions dis f-c" v-else>
						<view class=" dis a-c j-s f-wrap">
							<view class="tab dis  a-c j-c " :class="{tabactive:OptionsTabIndex==item.value}"
								v-for="(item,index) in statusList" :key="index" @click="OptionsTabSelect(item,index)">
								<text>{{item.label }}</text>
							</view>
						</view>
						<view class="custom-footer 	dis j-s a-c ">
							<view class="dis a-c j-c" @tap="close">取消</view>
							<view class="dis a-c j-c" @tap="statusConfirm">确定</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: {
			// 状态数据
			statusList: {
				type: Array,
				default: () => []
			},
			// 当前激活标签
			show: {
				type: Boolean,
				default: false
			},
			//头部插槽
			headerSlot: {
				type: Boolean,
				default: false,
			},
			headerTitle: {
				//头部标题
				type: String,
				default: '请选择',
			},
			bgColor: {
				type: String,
				default: '#FFF'
			},
			overflow: {
				//是否局部滚动
				type: String,
				default: '',
			},
			//最大高度
			maxHeight: {
				type: String,
				default: ''
			},
			border: {
				//是否边框
				type: Boolean,
				default: true,
			},
			headerStyle: Object,
			closeable: {
				//是否显示右上角叉号
				type: Boolean,
				default: true,
			},
			//弹出方向
			mode: {
				type: String,
				default: 'bottom' //top / right / bottom / center
			},
			//弹窗宽度
			width: {
				type: String,
				default: '100%'
			},
			//插槽内容类型
			contentType: {
				type: String,
				default: 'list' //list :列表选择 / custom :自定义 / status :状态筛选 /
			},
			//点击遮罩是否关闭弹窗 
			closeOnClickOverlay: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				modelshow: this.show,
				OptionsTabIndex: null, //切换下标
			}
		},
		onShow() {

		},
		onLoad() {

		},
		watch: {
			show(newVal) {
				this.modelshow = newVal
			}
		},
		methods: {
			//状态切换回调
			statusConfirm() {
				this.$emit('statusConfirm', this.OptionsTabIndex)
			},
			//状态切换
			OptionsTabSelect(item, index) {
				console.log(item);
				this.OptionsTabIndex = item.value;
			},
			//关闭事件
			close() {
				this.$emit('close')
			}
		}
	}
</script>
<style lang='scss' scoped>
	.header {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.header-padding {
		padding: 27rpx 30rpx;
	}

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

	.quickOptions {
		padding: 42rpx 42rpx 0;
		box-sizing: border-box;
		margin-bottom: 20rpx;


		.tab {
			width: 180rpx;
			padding: 9rpx 24rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #666;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #EEEEEE;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
		}

		.tabactive {
			background: #FDE935;
			color: #333;
			border: 1rpx solid #FDE935;
		}
	}

	.custom-footer {
		padding: 40rpx 0 0;
		box-sizing: border-box;

		view {
			font-size: 30rpx;
			padding: 20rpx;
			flex: 1;
		}

		view:first-child {
			color: #333;
			background: transparent;
			border-radius: 50rpx;
			border: 1rpx solid #FDE935;
			margin-right: 28rpx;
		}

		view:last-child {
			background: #FDE935;
			border-radius: 50rpx;
			color: #1F1F1F;
		}
	}
</style>