rtliveCompany/components/tab-popup.vue

<template>
	<view class="tab-popup">
		<view class="popup-box" v-if="show">
			<view class="item" :class="{ active: selectedItem === item }" @click="selectItem(item)" v-for="(item, index) in items" :key="index">
				{{ item }}
			</view>
		</view>
		<view class="popup-mask" v-if="show" @click="close"></view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		items: {
			type: Array,
			default: () => []
		},
		selectedItem: {
			type: String,
			default: ''
		}
	},
	methods: {
		selectItem(item) {
			this.$emit('select', item)
			this.$emit('update:show', false)
		},
		close() {
			this.$emit('update:show', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-popup {
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.popup-box {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 0 0 40rpx 40rpx;
		z-index: 100;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.item {
			padding: 14rpx 32rpx;
			height: 72rpx;
			box-sizing: border-box;
			background: #F7F8FA;
			border-radius: 70rpx;
			font-size: 28rpx;
			color: #333;
			flex-wrap: wrap;
			margin-right: 24rpx;
			cursor: pointer;
			transition: all 0.2s;
			border: 2rpx solid transparent;

			&.active {
				color: #388BFF;
				background: rgba(56,139,255,0.15);
				border-color: #388BFF;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>