Vue.js如何实现点击图标唤起支持多选日期的datepicker组件

算力阿峰

2026-10-5

实现m-date-picker点击图标弹出、多选日期的解决方案

现有代码的核心遗漏点

没有配置弹出触发规则：既没有设置trigger="click"让组件自带的日历图标作为点击触发源，也没有手动绑定显隐变量控制弹出，所以点击后没有反应
多选配置未生效：multi属性绑定的变量需要是布尔值true才能开启多选，你当前的写法依赖multi变量的默认值，如果默认是false就会进入单选模式
v-model绑定变量类型错误：多选模式下绑定值必须是数组类型，如果你的test变量是字符串/单个日期对象，会导致组件赋值异常无法正常运行

完整实现示例

<template>
  <!-- 方式1：用组件自带触发图标，无需额外写显隐逻辑 -->
  <m-date-picker
    align="right"
    v-model="selectedDates"
    icon="calendar"
    :lang="lang"
    :multi="true"
    :always-display="false"
    trigger="click"
  />

  <!-- 方式2：自定义外部触发图标，手动控制显隐 -->
  <m-icon name="calendar" @click="showPicker = true" />
  <m-date-picker
    align="right"
    v-model="selectedDates"
    :lang="lang"
    :multi="true"
    :always-display="false"
    v-model:visible="showPicker"
  />
</template>

<script setup>
import { ref } from 'vue'
// 多选模式下v-model必须绑定数组类型变量
const selectedDates = ref([])
const lang = ref('zh-CN')
// 手动控制显隐的变量
const showPicker = ref(false)
</script>