Как я могу добавить загрузку в datepicker vuetify? - PullRequest
Новая
       63

Как я могу добавить загрузку в datepicker vuetify?

0 голосов
/ 19 октября 2019

Демо, как это: 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-диалоге

Как я могу решить эту проблему?

1 Ответ

1 голос
/ 19 октября 2019

Да, можно показать загрузку. Но компонент v-dialog не имеет такого свойства явно, нам нужно написать некоторый внешний код. Но есть свойство загрузки в V-Card. Итак, я завернул сборщик данных в 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)
    }
  },
})
...