如何为Vuetify的Datepicker添加加载状态？v-dialog加载失效问题解决

我明白你想给Datepicker添加加载状态的需求，之前直接在v-dialog上绑定loading属性没生效，是因为Vuetify的v-dialog组件本身并没有loading这个内置属性——你参考的卡片组件的loading是卡片特有的功能，所以直接用在dialog上是不起作用的。

这里给你提供一个简单有效的解决方案，用Vuetify的v-overlay组件来实现加载覆盖效果：

修改后的完整代码 #

HTML部分 #

<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
  <template v-slot:activator="{ on }">
    <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
  </template>

  <!-- 加载覆盖层：当loading为true时覆盖整个Datepicker区域 -->
  <v-overlay v-model="loading" absolute>
    <v-progress-circular indeterminate size="64"></v-progress-circular>
  </v-overlay>

  <v-date-picker v-model="date" scrollable :disabled="loading">
    <v-spacer></v-spacer>
    <v-btn text color="primary" @click="modal = false" :disabled="loading">Cancel</v-btn>
    <v-btn text color="primary" @click="$refs.dialog.save(date)" :disabled="loading">OK</v-btn>
  </v-date-picker>
</v-dialog>

JS部分（你的原有代码可直接保留，这里重复一下方便对照） #

data: () => ({
  date: new Date().toISOString().substr(0, 10),
  modal: false,
  loading: false
}),
methods: {
  test () {
    console.log('test')
    this.loading = true
    setTimeout(() => (this.loading = false), 8000)
  }
}

关键说明 #

1. v-overlay的作用：这个组件专门用来创建全屏或容器内的覆盖层，绑定v-model="loading"后，会在loading为true时自动显示，覆盖在父容器（这里是v-dialog）内部的所有内容。
2. 加载指示器：我用了v-progress-circular作为加载动画，你也可以换成v-progress-linear或者其他Vuetify加载组件，根据需求调整样式。
3. 禁用交互：添加:disabled="loading"到v-date-picker和按钮上，避免在加载状态下用户还能操作控件，提升体验。

这样修改后，当你点击按钮触发test方法时，Datepicker区域就会显示加载动画，8秒后自动消失，完美实现你想要的效果～

内容的提问来源于stack exchange，提问作者moses toh