uniapp_lianxi/pages/me/me.vue

<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<u-dropdown ref="uDropdown" @open="open" @close="close">
			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
			<u-dropdown-item title="属性">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<!-- 	<u-checkbox-group>
						<u-checkbox class="item.checked?'checkboxbox':''" v-model="item.checked" v-for="(item, index) in list" :key="index"
						 :name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group> -->
					<!-- <uni-view class="item-box">
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
						<uni-view class="item">琪花瑶草</uni-view>
					</uni-view> -->
					<view class="item-box">
						<view class="item" :class="{'active': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index"
						 @tap="tapInfo(index,value)">
							{{value.name}}
						</view>
					</view>

					<u-button type="primary" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script>
	// import uActionSheet from "../../uview-ui/components/u-action-sheet/u-action-sheet.vue";
	// import uSelection from '../../uview-ui/components/u-select/u-select.vue';

	export default {
		data() {
			return {
				title: 'Hello',
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28,
					name: '点赞'
				}, {
					text: '分享',
					name: '分享'
				}, {
					text: '评论',
					name: '评论'
				}],
				// show: true
				lists: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				infoArr: [{
					name: "直播",
					id: '12',
				}, {
					name: "视频",
					id: '13',
				}, {
					name: "手游",
					id: '14',
				}],
				rSelect: [],
			}
		},
		onLoad() {

		},
		methods: {
			goPricate() {
				console.log("aa")
				uni.navigateTo({
					url: '/pages/pricate/pricate'
				})
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			closeDropdown() {
				console.log(this.rSelect)
				let arr = [];
				this.infoArr.forEach((item,index) => {
					this.rSelect.forEach(items => {
						if(index == items){
							arr.push(item.id)	
						}
					})
				})
				console.log(arr ,"删除的锕")
				this.$refs.uDropdown.close();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			tapInfo(e) {
				console.log(this.rSelect) //是数组，数组也有indexOf
				if (this.rSelect.indexOf(e) == -1) {
					console.log(e) //打印下标
					this.rSelect.push(e); //选中添加到数组里
				} else {
					this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
				}
			},
		}
	}
</script>

<style scoped>
	.item {
		border: 1px solid #2979ff;
		color: #2979ff;
		padding: 3px 15px;
		-webkit-border-radius: 38px;
		border-radius: 38px;
		margin-top: 11px;
	}

	.item-box {
		margin-bottom: 19px;
		display: flex;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		justify-content: space-around;
	}

	.slot-content {
		padding: 9px;
	}

	.active {
		color: #fff;
		background-color: #2979ff;
	}

	/deep/.u-checkbox__icon-wrap {
		display: none;
	}

	.checkboxbox {
		background: #EB3F33;
		color: white;
	}

	.active {
		color: white;
		border: 1px solid #2979ff;
		background-color: #2979ff;
	}
</style>