用vuex中的datetime组件，选择日期的弹窗弹起来的时候跳转浏览器

Question

用vuex中的datetime组件，选择日期的弹窗弹起来的时候跳转浏览器，请问各位有遇到过这个情况吗？

<group>
    <datetime title="" start-date="1990-01-01" end-date="2023-05-26" formatter="YY-MM-DD" :value="form.startTime" placeholder="请选择参加工作开始时间" style="width: 100%;padding: 0;margin: 0px;"></datetime>
</group>

Answer 1

在 datetime 组件上添加 stop-propagation 属性，将该属性值设为 false

<datetime title="" start-date="1990-01-01" end-date="2023-05-26" formatter="YY-MM-DD" :value="form.startTime" placeholder="请选择参加工作开始时间" style="width: 100%;padding: 0;margin: 0px;" stop-propagation="false"></datetime>

监听 datetime 组件的 click 事件，在事件处理函数中手动停止事件冒泡，避免跳转浏览器，代码如下：

<datetime title="" start-date="1990-01-01" end-date="2023-05-26" formatter="YY-MM-DD" :value="form.startTime" placeholder="请选择参加工作开始时间" style="width: 100%;padding: 0;margin: 0px;" @click.stop="handleDatetimeClick"></datetime>

// 在 Vue 实例中定义 handleDatetimeClick 方法
methods: {
  handleDatetimeClick(event) {
    // 停止事件冒泡
    event.stopPropagation();
  }
}

第二次跳转 可以尝试给 datetime 组件添加一个 v-model 指令来绑定一个数据属性，并在该数据属性上添加一个计算属性来防止 datetime 组件失去焦点。：