Question

像这样的演示：https://codepen.io/positivethinking639/pen/wvvoMpK?editors=1010

我的html是这样的：

<v-dialog
  ref="dialog"
  v-model="modal"
  :return-value.sync="date"
  persistent
  width="290px"
  :loading="loading"
>
  <template v-slot:activator="{ on }">
    <v-btn color="success" dark v-on="on" @click="test">call datepicker</v-btn>
  </template>
  <v-date-picker v-model="date" scrollable>
    <v-spacer></v-spacer>
    <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
    <v-btn text color="primary" @click="$refs.dialog.save(date)">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)
    }
  },

我遵循此参考文献：https://vuetifyjs.com/en/components/cards#loading-card

我尝试那样，但似乎在v对话框中不起作用

我该如何解决这个问题？

Answer 1

是的，可以显示加载。但是v-dialog组件没有显式的属性，我们需要编写一些外部代码。但是v卡中有加载属性。因此，我将数据选择器包装在V卡中。现在它正在按预期运行

工作代码在这里： https://codepen.io/chansv/pen/gOOLPqp?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="6" md="4">
        <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>
          <v-card :loading="loading">
          <v-date-picker v-model="date" scrollable>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
            <v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
          </v-date-picker></v-card>
        </v-dialog>
      </v-col>

    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  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)
    }
  },
})

如何在datepicker vuetify中添加加载内容？

1 个答案: