时间戳

首页 > 解决方案 > 如何在 datepicker vuetify 中添加加载？

vue.js - 如何在 datepicker vuetify 中添加加载？

问题描述

像这样的演示：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-dialog 中不起作用

我怎么解决这个问题？

标签： vue.jsdatepickermodal-dialogvue-componentvuetify.js

解决方案

是的，可以显示加载。但是 v-dialog 组件没有明确的这样的属性，我们需要编写一些外部代码。但是 v-card 中有一个加载属性。因此，我将数据选择器包装在 v-card 中。现在它按预期工作

工作代码笔在这里： 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)
    }
  },
})

推荐阅读