Vant组件--下拉多选和单选功能

最新推荐文章于 2025-05-22 14:49:19 发布

退堂鼓职业选手

最新推荐文章于 2025-05-22 14:49:19 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_45886797/article/details/140207072

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>

效果

在这里插入图片描述