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;
	}
}

::v-deep .u-transition.u-fade-enter-to,
::v-deep .u-transition.u-fade-enter-active,
::v-deep .u-transition.u-fade-leave-to,
::v-deep .u-transition.u-fade-leave-active {
  z-index: 99999 !important;
}
::v-deep .u-transition {
  z-index: 99999 !important;
}
::v-deep .u-popup {
  z-index: 100000 !important;
}
</style>