vant popup弹出层多选功能

一、效果图

二、代码块

<template>
	<div>
		<van-button @click="btn" size="mini">显示弹出层</van-button>
		<van-popup
		  round
		  v-model:show="show"
		  position="bottom"
		  :style="{ height: '50%'}"
		  >
			  <van-picker
				show-toolbar
				:columns="columns"
				value-key="name"
				item-height="56px"
				@confirm="onConfirm"
				@cancel="show = false"
			  >
				  <template #option="option">
					<div style="width: 100%;margin:0 auto;">
						<van-checkbox-group v-model="groupChecked" style="display: inline-block;">
							<van-checkbox :name="option.city" shape="square">{{option.city}}</van-checkbox>
						</van-checkbox-group>	
					</div>
				  </template>
			  </van-picker>
		</van-popup>
	</div>
</template>

<script>
	import Toast from 'vant/lib/toast';
	export default{
		data(){
			return {
				value: '',
				groupChecked:[],
				show:false,
				columns: [{
					city:'临汾',
					status:1
				},{
					city:'运城',
					status:2
				},{
					city:'长治',
					status:3
				},{
					city:'晋城',
					status:4
				},{
					city:'吕梁',
					status:5
				},{
					city:'晋中',
					status:6
				},{
					city:'忻州',
					status:7
				},{
					city:'大同',
					status:8
				},{
					city:'朔州',
					status:9
				},{
					city:'阳泉',
					status:10
				},{
					city:'太原',
					status:11
				}],
			}
		},
		methods:{
			btn(){
				this.show = true
			},
			onConfirm(value) {
				this.show = false
				this.$message.success('我选中的是:' + this.groupChecked);
			},
		},
		created() {
			
		}
	}
</script>

<style scoped="">
	ul>li{
		line-height: 40px;
	}
</style>