Vue2 ant-design 设置mode=“[‘month‘, ‘month‘]“时，选择时间后弹框不关闭

hhh

已于 2024-10-09 14:10:30 修改

阅读量364

点赞数 2

分类专栏： vue 踩坑文章标签： vue.js

于 2024-10-09 13:51:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43978501/article/details/142784832

版权

vue 踩坑专栏收录该内容

6 篇文章

订阅专栏

在这里插入图片描述
废话不多说，直接上代码：

<template>
  <div class="page-main">
    <a-range-picker
       value-format="YYYY-MM"
       format="YYYY-MM"
       v-model="billMonth"
       :open="monthPickShow"
       @panelChange="handlePanelChange"
       @openChange="handleOpenChange"
       :mode="['month', 'month']"
       id="timePicker"
     />
  </div>
</template>
<script>
import moment from 'moment'

export default {
  name: 'monthPiker',
  data() {
    return {
      monthPickShow: false,
      billMonth: [],
    }
  },
  methods: {
    handlePanelChange(value, mode) {
      // mode 的值为 'date' 时，即是选择了时间
      this.monthPickShow = mode[1] === 'date' ? false : true
      this.billMonth = [moment(value[0]).format('YYYY-MM'), moment(value[1]).format('YYYY-MM')]
    },
    handleOpenChange(status) {
      this.monthPickShow = status ? true : false
    },
</script>