Vuexy主题模态框中AppDateTimePicker选日期后关闭问题求助

使用Vuexy主题开发Vue.js应用时，在模态框中使用AppDateTimePicker组件，点击选择日期后，日期选择器会立即关闭，同时模态框也跟着关闭。组件代码如下：

<AppDateTimePicker
   v-model="delDate"
   :rules="[requiredValidator]"
   label="Delivery Date"
   placeholder="Delivery Date"
   @input="onDateInput"
   persistentPlaceholder
/>

解决方法 #

1. 阻止日期选择器的事件冒泡 #

问题根源多是点击日期选项时事件冒泡到模态框外层，触发了模态框的点击关闭逻辑。给AppDateTimePicker添加@click.stop阻止事件冒泡：

<AppDateTimePicker
   v-model="delDate"
   :rules="[requiredValidator]"
   label="Delivery Date"
   placeholder="Delivery Date"
   @input="onDateInput"
   @click.stop
   persistentPlaceholder
/>

2. 调整模态框的关闭触发条件 #

如果模态框启用了点击外部关闭的功能（Vuexy模态框默认可能带clickToClose属性），可将该属性设为false，仅允许通过关闭按钮关闭：

<AppModal
  :clickToClose="false"
  <!-- 其他模态框属性 -->
>
  <AppDateTimePicker
    <!-- 日期选择器属性 -->
  />
</AppModal>

若需保留点击外部关闭，可给模态框内容容器添加@click.stop，避免点击内部区域触发关闭：

<AppModal>
  <div @click.stop>
    <AppDateTimePicker
      <!-- 日期选择器属性 -->
    />
    <!-- 其他模态框内容 -->
  </div>
</AppModal>

3. 检查onDateInput方法的逻辑 #

确认onDateInput方法中是否误写了关闭模态框的代码，比如修改了控制模态框显示的变量：

// 排查是否存在这类错误代码
onDateInput() {
  this.modalVisible = false; // 若有则删除或注释
}

4. 启用模态框的persistent属性 #

Vuexy模态框支持persistent属性，设为true后，点击外部或按ESC都不会关闭模态框，仅能通过关闭按钮操作：

<AppModal
  persistent
  <!-- 其他属性 -->
>
  <AppDateTimePicker
    <!-- 日期选择器属性 -->
  />
</AppModal>

内容的提问来源于stack exchange，提问作者Carlos Rodriguez