Vant组件–支持下拉多选和单选
<template>
<van-picker
:title="placeholder || '请选择'"
:columns="optionsConverted"
@cancel="handleCancel"
@confirm="handleConfirm"
>
<template #option="option">
<!-- 多选 -->
<div v-if="isMultiple">
<van-checkbox-group
v-model="selectedValue"
>
<van-checkbox :key="option.value" :name="option.value" shape="square">{{ option.text }}</van-checkbox>
</van-checkbox-group>
</div>
<!-- 单选 -->
<div v-else>
<van-radio-group
v-model="selectedValue"
>
<van-radio
:key="option.value"
:name="option.value"
shape="square"
>{{ option.text }}</van-radio>
</van-radio-group>
</div>
</template>
</van-picker>
</template>
<script setup>
const props = defineProps({
label: {},
placeholder: {
type: String,
default: '请选择',
},
columns: {
type: Array,
default: () => [],
},
isMultiple: {
type: Boolean,
default: false,
},
});
const selectedValue = ref([]);
const emits = defineEmits(['cancel', 'confirm']);
const optionsConverted = computed(() => unref(props.columns).map((option) => ({
text: option.label,
value: option.value,
})));
const handleCancel = () => {
emits('cancel');
};
const handleConfirm = () => {
emits('confirm', selectedValue.value);
};
</script>
组件使用
<div>
<van-field
v-model="pickedLabel"
:is-link="true"
placeholder="请选择消息类型"
@click="showPicker = true"
/>
</div>
<van-popup v-model:show="showPicker" round position="bottom">
<mb-picker
title="类别筛选"
:columns="sendMsgType.toArray()"
:is-multiple="true"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
效果