uniapp 微信小程序开发需要一个可以多选的弹窗，记录一下实现的效果，作为模板，以便于后期可能的复用。

组件使用

<materialPropertieswl :materialId='data.Id' @getdata="getType"></materialPropertieswl>
// 获取类型
getType(e) {
	console.log(e)
	this.data.Attributes = []
	if (e) {
		e.forEach((type) => {
			var data = {
				Id: '',
				KeyCode: type.KeyCode,
				KeyName: type.KeyName,
			}
			this.data.Attributes.push(data)
		});
	}
},

组件代码

<template>
	<view>
		<div @click="getshow">
			<div class="userInfo1">
				<div class="userInfoName">
					<text>物料属性</text><text class="red">*</text>
				</div>
				<div class="bodys">
					<input :value="name" disabled="" type="text" placeholder="请选择"
						placeholder-style="font-size:32rpx;color: #D5D5E0;" />
					<image src="http://39.99.155.125:8082/buildingMaterialsCloud/static/icon_right.png" mode="widthFix">
					</image>
				</div>
			</div>
		</div>
		<u-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
			<view class="popupwin">
				<div class="popTitle">
					物料属性
				</div>
				<div class="close" @click="getHide">
					<u-icon name="close"></u-icon>
				</div>
				<scroll-view class="searchbody" scroll-y>
					<div class="list">
						<div @click="getselected" :class="{active:selectedAll}" class="listitem">
							<text>全部</text>
							<div v-if="selectedAll" class="icon">
								<image
									src="http://39.99.155.125:8082/buildingMaterialsCloud/home/icon_selectedcheck.png"
									mode="widthFix">
								</image>
							</div>
						</div>
						<div @click="selected(index)" :class="{active:item.selected}" class="listitem"
							v-for="(item,index) in list" :key="index">
							<text>{{item.KeyName}}</text>
							<div v-if="item.selected" class="icon">
								<image
									src="http://39.99.155.125:8082/buildingMaterialsCloud/home/icon_selectedcheck.png"
									mode="widthFix">
								</image>
							</div>
						</div>
					</div>
				</scroll-view>
				<div class="operation">
					<div class="reset" @click="reset">重置</div>
					<div class="confirm" @click="confirm">确认</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		GetDicListByType,
		GetMaterialAttributes
	} from '@/config/api.js'
	export default {
		data() {
			return {
				show: false,
				active: 0,
				list: [],
				selectedAll: true,
				BelongId: '',
				AttributesList: []
			}
		},
		props: {
			materialId: {
				type: String,
				default () {
					return ''
				}
			}
		},
		watch: {
			materialId() {
				this.GetMaterialAttributes()
				// this.list = this.list2
			},
		},
		computed: {
			name: function() {
				var name = []
				this.list.forEach((type) => {
					if (type.selected) {
						name.push(type.KeyName)
					}
				});
				return name.join(",")
			}
		},
		mounted() {
			var that = this;
			that.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
			this.getdata()
		},
		methods: {
			GetMaterialAttributes() {
				var that = this;
				if (!that.materialId) {
					return
				}
				console.log(that.materialId)
				GetMaterialAttributes({
					params: {
						MaterialId: that.materialId
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						that.AttributesList = res.Data
						that.list.forEach((type, index) => {
							that.AttributesList.forEach((type2) => {
								console.log(type2)
								console.log(type)
								console.log(index)
								if (type.KeyCode == type2.KeyCode) {
									that.list[index].selected = true
								}
							});
						});
						that.getUpdate()
					}
				}).catch(err => {

				})
			},
			getUpdate() {
				var data = []
				console.log(this.list)
				this.list.forEach((type) => {
					console.log(type)
					if (type.selected) {
						data.push(type)
					}
				});
				this.$emit('getdata', data)
			},
			getdata() {
				var that = this;
				that.list[0] = [];
				that.datalist = []
				GetDicListByType({
					params: {
						BelongId: that.BelongId,
						DType: 'CommodityType',
					},
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						res.Data.forEach((type) => {
							type.selected = false
						});
						that.list = res.Data
						if (that.materialId) {
							that.GetMaterialAttributes()
						}
						that.getIsSeletedAll()
					}
				}).catch(err => {

				})
			},
			getshow() {
				this.show = true
			},
			// 全选
			getselected() {
				this.selectedAll = !this.selectedAll
				this.getselectedCheck()
			},
			getselectedCheck() {
				var that = this
				var data = that.list
				for (var i = 0; i < data.length; i++) {
					data[i].selected = this.selectedAll
				}
				that.list = data
			},
			reset() {
				var that = this;
				that.getselected()
				that.getHide()
			},
			confirm() {
				var that = this;
				that.getUpdate()
				that.getHide()
			},
			getHide() {
				this.show = false
			},
			getIsSeletedAll() {
				var data = this.list
				this.selectedAll = false
				var num = 0
				for (var i = 0; i < data.length; i++) {
					if (data[i].selected) {
						num = num + 1
					}
				}
				if (num === this.list.length && this.list.length > 0) {
					this.selectedAll = true
				}
			},
			// 选择
			selected(e) {
				this.list[e].selected = !this.list[e].selected
				// 更新列表
				this.$forceUpdate()
				this.getIsSeletedAll()
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupwin {
		width: 750rpx;
		// height: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
		position: relative;
		z-index: 1000;
	}

	.list {
		width: 694rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: flex-start;

		.listitem {
			height: 72rpx;
			padding: 0 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 2rpx solid rgba(21, 24, 82, 0.1);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #737497;
			}
		}

		.listitem.active {
			border: 2rpx solid #3F87FF;

			text {
				color: #4087FF;
			}
		}
	}

	.searchbody {
		height: 550rpx;
	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 10;
	}

	.popTitle {
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
		margin-left: 28rpx;
	}

	.typedown {
		width: 171rpx;
		height: 60rpx;
		background: #F5F6FC;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		.kuai {
			width: 24rpx;
			height: 23rpx;
		}

		text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #151852;
			margin-left: 9rpx;
			margin-right: 23rpx;
		}

		.down {
			width: 21rpx;
			height: 13rpx;
		}
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		width: 36rpx;
		position: absolute;
		right: 0;
		bottom: 0;

		image {
			width: 36rpx;
		}
	}

	.operation {
		width: 694rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin: 0 auto;
		padding-bottom: 64rpx;

		.reset {
			width: 333rpx;
			height: 88rpx;
			background: rgba(#4087FF, 0.1);
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #4087FF;
		}

		.confirm {
			width: 333rpx;
			height: 88rpx;
			background: #4087FF;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}

	.userInfo1 {
		width: 630rpx;
		min-height: 157rpx;
		background: rgba(216, 216, 216, 0);
		box-shadow: 0px 1rpx 0px 0px #F2F2F2;
		margin: 0 auto;

		.bodys {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 32rpx;
			}
		}

		.userInfoName {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			padding-top: 32rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151852;
			}

			.red {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5252;
				margin-top: -15rpx;
			}

		}

		.userInfoName2 {
			text {
				color: #BABBCB;
			}

			.red {
				color: #FFD0CF;
			}
		}

		input {
			margin-top: 8rpx;
			color: #474A77;
			font-size: 32rpx;
			z-index: 1;
			position: relative;
		}

		.disabled {
			color: #C8C8D6;
		}
	}
</style>