关于antd-vue 日期组件手动关闭弹出框的问题

由于产品的需求，有一个日期筛选的条件，如图所示

框架选用的是ant-vue，选择了其中range的插件

<a-range-picker
style="width: 214px"
:value="searchTime"
:placeholder="['开始月份', '结束月份']"
format="YYYY-MM"
:mode="modelType"
@panelChange="handleChange"
@change="clearValue"
>
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>

这个插件官网上也有，在使用过程中就会发现当选择日期的时候和其他选择器不一样，它只有在clear的时候才会出反change事件，除此之外触发的是panelChange的方法。

但是官网上就是选择了之后弹出框没有自动关闭，所以加一下如下代码

panelChange绑定的方法里再加入这行代码：

this.$refs.picker.$refs.picker.sOpen = false;

然后就会发现弹窗正常关闭了，但是不满足交互要求啊，交互希望我选择后面的范围区间再关闭，前面的不关闭，所以再优化一下

重点是这几行代码

if (this.searchTime[1] && this.searchTime[1]._d != value[1]._d) {
        this.$refs.picker.$refs.picker.sOpen = false;
      }

完整的方法如下

handleChange(value, mode) {
      if (this.searchTime[1] && this.searchTime[1]._d != value[1]._d) {
        this.$refs.picker.$refs.picker.sOpen = false;
      }
      this.searchTime = value;
      this.searchData.lifecycleStartTime = moment(value[0]).format("YYYY-MM");
      this.searchData.lifecycleEndTime = moment(value[1]).format("YYYY-MM"); 
      this.mode2 = [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1],
      ];
    },

searchTime 记得先定义一下

完美解决交互所想要的效果。