uniapp自定义下拉选项组件

效果图

 

 字体默认颜色为黑色，未选中右边图片不显示，选中，当前选中这一行字体变蓝色，当前选中这一行右边图片显示

代码 默认styleShow=false

	<view @tap="study" class="filterText" :class="studyShow ? 'active' : ''">
						{{ learnStyle || '学习方式' }}
						<u-icon name="arrow-down-fill" color="#3E3E3E" size="13"></u-icon>
					</view>




列表
<view class="styleBox"  :class="styleShow?'content-open':'content-close'">
						<view class="box" v-for="(item, index) in studyList" :key="index" @tap="studyWay(item,index)">
							<view class="titleArea">
								<view class="leftText" :class="studyID==index?'active':''">{{ item.name }}</view>
								<view class="rightText1" :class="studyID==index?'show':'rightText1'"><u-icon name="checkbox-mark" color="#006df7" ></u-icon></view>
							</view>
						</view>
					</view>
---------------我是无情的分隔线---------------
//JS部分
//将列表隐藏并调数据
studyWay(data,index) {
			//this.learnStyle = data.name;
			this.styleShow = false;
			//this.studyShow = true;
			//this.screenFrom.method = data.id;
			this.studyID=index;
			//console.log(index,"jiooo,mS")
			//this.pageStart = 1;
			//this.list = [];
			//uni.showLoading({
			//	title:"loading"
			//});
			//this.getList();
		},
-------------------------------------------------
//样式部分
.styleBox {
				position: absolute;
				width: 100%;
				top: 65rpx;
				overflow: hidden;
				overflow-y: scroll;
				height: 400rpx;
				background-color: #ffffff;
				z-index: 999;
					box-shadow: 0rpx 0rpx 15rpx 0rpx #dde4ed ;
				.box {
					padding: 0 30rpx;
					.titleArea {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid #bbbbbb;
						padding: 32rpx 0 24rpx 0;
					.leftText{
						font-size: 32rpx;
						font-weight: 400;
						color: #191919;
					}
					.active{
						color:#006df7;
					}
					.rightText{
						font-size: 20rpx;
						font-weight: 400;
						color: #bbbbbb;
					}
					.rightText1{
						font-size:25rpx;
						font-weight: 400;
						color: #bbbbbb;
						display: none;
					}
					.show{
						display: block;
					}
					}
				}
			}