//组件
<view>
	<view class="u-flex u-row-between u-m-b-20">
		<view class="w100 u-flex u-row-between">
			<view v-for="(tab,tabi) in tablist" :key="tabi"
			:class="'u-m-r-10 '+(type=='label'?(tablev==tabi?'tabchecked':'tabitem'):(tablev==tabi?'tabchecked1':'tabitem1'))"
				@click="shaixuan(tabi)">
				{{tab.name}}
			</view>
		</view>
		<view @click="isshaixuan=!isshaixuan" v-if="tablist[tablev].issx" class="shaixuanicon">
			<u-icon name="shaixuan" custom-prefix="custom-icon" color="#555" size="40"></u-icon>
		</view>

	</view>

	<view class="shaixuanplant" v-if="isshaixuan">
		<text class="inner"></text>
		<view v-for="(item,index) in selectlist" :key="index" @click="checkshaixuan(index)"
			:class="index==selectCurrent?'shaixuanitem checked':'shaixuanitem'">
			{{item.label}}
		</view>
	</view>
</view>

<script>
	export default {
		name: "screen",
		data() {
			return {
				tablev: 0,
				isshaixuan: false,
				selectCurrent: 0
			};
		},
		props: {
			type: {
				type: String,
				default: 'label'
			},
			tablist: {
				type: Array,
				default: []
			},
			selectlist: {
				type: Array,
				default: []
			}
		},
		created() {},
		methods: {
			shaixuan(e) {
				this.isshaixuan = this.tablist[e].issx ? this.isshaixuan : false

				this.tablev = e
				this.$emit("shaixuan", e)
			},
			checkshaixuan(e) {
				this.selectCurrent = e
				this.isshaixuan = false
				this.$emit("checkshaixuan", e)
			}
		},
	}
</script>

.tabchecked {
	text-align: center;
	color: #FFFFFF;
	background: linear-gradient(to right, #e62b1f, #fe5c2b);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, 0.20);
}

.tabitem {
	text-align: center;
	color: #000000;
	background: linear-gradient(to right, #ddd, #fff);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, 0.20);
}

.tabchecked1 {
	text-align: center;
	color: #000000;
	padding: 10rpx 20rpx;
	border-bottom: 2px solid #0084bf;
	
}

.tabitem1 {
	text-align: center;
	color: #000000;
	padding: 10rpx 20rpx;
}

.shaixuanplant {
	color: #FFFFFF;
	position: absolute;
	right: 10rpx;
	// top: 900rpx;
	background-color: rgba(0, 0, 0, 0.70);
	// clip-path: polygon(0 15%, 25% 15%, 30% 0,35% 15%, 100% 15%,100% 100%,0% 100%);
}

.inner {
	position: absolute;
	right: 40rpx;
	top: -40rpx;
	width: 0;
	height: 0;
	border: 20rpx solid;
	border-color: transparent transparent rgba(0, 0, 0, 0.70) transparent;
}

.shaixuanitem {
	text-align: center;
	padding: 20rpx;
	margin: 10rpx;
}

.checked {
	text-align: center;
	background-color: #e62b1f;
}

.shaixuanicon{
	width: 60rpx;
	height: 60rpx;
	background-color: #FFF;
	
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.w100{
	width: 100%;
}

页面引用

<screen :tablist="tablist" :selectlist="selectlist" @shaixuan="shaixuan" @checkshaixuan="checkshaixuan"></screen>

import screen from '@/components/screen/screen'
export default {
	components: {
		screen
	},
	data() {
		return {
			tablev: 0,
			tablist: [
				{name:'楼盘推荐',issx:false},
				{name:'产品推荐',issx:true},
				{name:'内容推广',issx:true}
				],
				selectlist: [],
		}
	},
	methods: {
		shaixuan(e) {
			// 给筛选面板赋值
			this.tablev=e
			if (this.tablev == 0) {

			} else if (this.tablev == 1) {
				this.selectlist = [{
						label: '最近上新'
					},
					{
						label: '最多推荐'
					}
				]
			} else if (this.tablev == 2) {
				this.selectlist = [{
						label: '热门物料'
					},
					{
						label: '最近使用'
					}
				]
			}
		},
		checkshaixuan(e) {
			this.selectCurrent=e
			console.log(this.tablev == 1 ? '产品推荐' : '内容推广')
		}
	}
}