第一版

uniapp 结合uview实现复选弹窗

代码

<template>
	<view>
		<view @click="show=true">
			<slot></slot>
		</view>
		<u-popup :show="show" 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="getactive(item)" class="listitem" v-for="(item,index) in list" :key="index">
							<text>{{item.name}}</text>
							<div @click.stop="getactiveremove(item)" v-if="item.active" class="icon">
								<u-icon size="24" name="minus-circle-fill" color="#FFA41E"></u-icon>
							</div>
						</div>
					</div>
				</scroll-view>
				<div class="logout2">
					<div class="logout" @click="returnlist">
						确认
					</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		labelGetList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				show: false,
				keyword: '',
				list: [{
					name: '中文',
					active: false
				}, {
					name: '英语',
					active: false
				}, {
					name: '日语',
					active: false
				}, {
					name: '西班牙语',
					active: false
				}, {
					name: '法语',
					active: false
				}, {
					name: '德语',
					active: false
				}, {
					name: '葡萄牙语',
					active: false
				}, {
					name: '意大利语',
					active: false
				}, {
					name: '韩语',
					active: false
				}, {
					name: '土耳其语',
					active: false
				}, {
					name: '荷兰语',
					active: false
				}, {
					name: '阿拉伯语',
					active: false
				}, {
					name: '泰语',
					active: false
				}, {
					name: '瑞典语',
					active: false
				}, {
					name: '丹麦语',
					active: false
				}, {
					name: '越南语',
					active: false
				}, {
					name: '挪威语',
					active: false
				}, {
					name: '波兰语',
					active: false
				}, {
					name: '芬兰语',
					active: false
				}, {
					name: '印度尼西亚语',
					active: false
				}, {
					name: '希伯来语',
					active: false
				}, {
					name: '希腊语',
					active: false
				}, {
					name: '罗马尼亚语',
					active: false
				}, {
					name: '匈牙利语',
					active: false
				}, {
					name: '捷克语',
					active: false
				}, {
					name: '加泰罗尼亚语',
					active: false
				}, {
					name: '斯洛伐克语',
					active: false
				}, {
					name: '乌克兰语',
					active: false
				}, {
					name: '克罗地亚语',
					active: false
				}, {
					name: '马来语',
					active: false
				}, {
					name: '印地语',
					active: false
				}, {
					name: '其他语言',
					active: false
				}],
			}
		},
		props: {
			datastr: {
				type: String,
				default () {
					return '';
				}
			}
		},
		watch: {
			datastr() {
				if (this.datastr) {
					var data = this.datastr.split(",");
					this.list.forEach((type, index) => {
						data.forEach((type2) => {
							if (type2 == type.name) {
								this.list[index].active = true
							}
						});
					});
				}
			},
		},
		mounted() {},
		methods: {
			getHide() {
				this.show = false
			},
			returnlist() {
				var list = []
				this.list.forEach((type) => {
					if (type.active) {
						list.push(type.name)
					}
				});
				this.$emit('getdata', list.join(","))
				this.getHide()
			},
			getActiveNum() {
				var num = 0
				this.list.forEach((type) => {
					if (type.active) {
						num = num + 1
					}
				});
				return num
			},
			getactive(item) {
				var that = this;
				console.log(item)
				if (this.getActiveNum() < 3) {
					this.list.forEach((type) => {
						if (item.name == type.name) {
							type.active = true
						}
					});
				} else {
					uni.showToast({
						title: '最多可添加3个',
						icon: 'none'
					})
				}
			},
			getactiveremove(item) {
				var that = this;
				that.list.forEach((type) => {
					if (item.name == type.name) {
						type.active = false
					}
				});
			},
		}
	}
</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;
	}

	.line {
		width: 100rpx;
		height: 4rpx;
		opacity: 1;
		background: #7D7D7D;
		margin: 25rpx auto;
	}

	.list {
		width: 686rpx;
		margin: 0 auto;

		.listitem {
			height: 96rpx;
			width: 100%;
			border-bottom: 1rpx solid rgba(#000000, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 32rpx;
			}

			text {
				margin-left: 32rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}

	.nodata {
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #7D7D7D;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin: 64rpx auto;
	}

	.searchbody {
		height: 550rpx;
	}

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

	.logout {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		margin: 64rpx auto;
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 311rpx;
		height: 80rpx;
		background: #2563E9;
		border-radius: 20rpx;
		opacity: 1;
	}

	.logout2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.popTitle {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		font-size: 32rpx;
		color: #000;
	}
</style>

使用

			<getLanguage :datastr="data.language" @getdata="getLang">
				<item title="使用语言">
					<text>{{data.language}}</text>
				</item>
			</getLanguage>

			// 修改语言
			getLang(e) {
				this.data.language = e
				var data = {
					language: this.data.language,
					id: this.id
				}
				this.userEdit(data)
			},