mobile-workflow/components/common/MultiplePicker.vue

<template>
	<view>
		<uni-popup ref="mtPicker">
			<view class="w-picker-m">
				<view>
					<text @click="mtPicker.close()">取消</text>
					<text>{{title || '请选择'}}</text>
					<text @click="ok">确定</text>
				</view>
				<scroll-view scroll-y class="w-picker-content">
					<checkbox-group class="w-picker-options" @change="checkChange">
						<label v-for="(option, i) in props.options" :key="i">
							<checkbox :value="option.value" :checked="checked(option.value)" color="#4478F7"
								style="transform:scale(0.7); flex: 1;" />
							<text>{{option[index]}}</text>
						</label>
					</checkbox-group>
				</scroll-view>
			</view>
		</uni-popup>
		<slot :show="show"></slot>
	</view>
</template>

<script setup>
	import { computed, ref, watch } from "vue";
	const mtPicker = ref()
	const props = defineProps({
		title: String,
		options: {
			type: Array,
			default: () => {
				return []
			}
		},
		index: {
			type: String,
			default: 'text'
		},
		modelValue: Array
	})

	const val = ref([])
	const valSet = ref(null)

	const emits = defineEmits(['update:modelValue'])

	function show() {
		val.value = props.modelValue || []
		mtPicker.value.open('bottom')
	}

	function ok() {
		emits('update:modelValue', val.value)
		mtPicker.value.close()
	}

	function checkChange(e) {
		val.value = e.detail.value
	}

	function checked(v) {
		return val.value.indexOf(v) > -1
	}
</script>

<style lang="less" scoped>
	.w-picker-m {
		height: 300px;
		width: 100%;
		background-color: white;

		.w-picker-options {
			display: flex;
			flex-direction: column;
			padding: 20rpx;

			&>label {
				padding: 10rpx 0;
				margin: 4rpx 0;
				background-color: #f4f4f4;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
			}
		}

		&>view:first-child {
			padding: 20rpx 16rpx;
			display: flex;

			&>text:nth-child(1) {
				color: #8a8a8a;
			}

			&>text:nth-child(2) {
				flex: 1;
				text-align: center;
			}

			&>text:nth-child(3) {
				color: #4478F7;
			}
		}

		.w-picker-content {
			height: 260px;
		}
	}
</style>