移动端 组件

monitorMobile/components/selectSearch.vue

@@ -6,14 +6,19 @@
 				<view class="title">
 					{{'请选择' + popupTitle}}
 				</view>
-				<view style="padding: 0 30rpx 30rpx 30rpx">
+				<view v-if="filterable" style="padding: 0 30rpx 30rpx 30rpx">
 					<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round"
 						:showAction="false"></u-search>
 				</view>
-				<u-radio-group :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
-					<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index" :label="item.label"
-						:name="item.value"></u-radio>
+				<u-radio-group v-if="!multiple" :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
+					<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index"
+						:label="item.label" :name="item.value"></u-radio>
 				</u-radio-group>
+				<u-checkbox-group v-else :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
+					<u-checkbox v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index"
+						:label="item.label" :name="item.value">
+					</u-checkbox>
+				</u-checkbox-group>
 				<view style="padding: 36rpx 50rpx">
 					<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;"
 						text="确定"></u-button>
@@ -54,6 +59,12 @@
 			cellVisible: {
 				default: true,
 			},
+			multiple: {
+				default: false,
+			},
+			filterable: {
+				default: true,
+			},
 		},
 		data() {
 			return {
@@ -115,6 +126,19 @@
 			padding: 24rpx 0;
 		}
 	}
+	
+	.u-checkbox-group {
+		width: 92%;
+		max-height: 680rpx;
+		overflow-y: auto;
+		padding: 0 30rpx;
+	
+		.u-cell {
+			background-color: #fff;
+			border-radius: 20rpx 20rpx 0 0;
+			padding: 24rpx 0;
+		}
+	}
 
 	.u-border-bottom {
 		border-color: #F6F6F6 !important;
@@ -123,4 +147,8 @@
 	.u-radio {
 		margin-top: 18rpx;
 	}
+	
+	.u-checkbox {
+		margin-top: 18rpx;
+	}
 </style>