snackbar_具有SnackBar组件的Vuetify对话框加载器

snackbar

VuetifyDialogLoader (VuetifyDialogLoader)

Vuetify Dialog Loader Component (with SnackBar) component that can be used locally or globally

可以在本地或全局使用的Vuetify对话框加载器组件(带有SnackBar)组件

This component use the Vuetify Dialog Loader to show loading dialog, with optional SnackBar notifications (snackbar disabled by default)

该组件使用Vuetify对话框加载器显示加载对话框，并带有可选的SnackBar通知(默认情况下，snackbar被禁用)

View demo 查看演示 Download Source 下载源

用法 (Usage)

Insert component where you want to use it:

将组件插入要使用的位置：

<dialog-loader ref="dialogLoader"></dialog-loader>

Alternatively you can place it in main App component and access it globally via this.$root.$confirm

或者，您可以将其放置在主要的App组件中，并通过this.$root.$confirm全局访问

<template>
  <v-app>
    ...
    <dialog-loader ref="dialogLoader"></dialog-loader>
  </v-app>
</template>

无回调的标准用法： (Standard Usage Without Callback:)

this.$root.$dialogLoader.show( 'Doing some action...', { color: 'primary' } )

this.$root.$dialogLoader.hide()

snackbar will hide after timeout value:

快餐栏将在超时值后隐藏：

this.$root.$dialogLoader.showSnackbar( 'Action failed! Oh no!', { color: 'error' } )

only necessary if timeout is set to 0 or need to hide snackbar for some other reason:

仅在超时设置为0或由于其他原因需要隐藏小吃栏时才需要：

this.$root.$dialogLoader.hideSnackbar()

高级用法(带有返回承诺的可选回调) (Advanced Usage (with optional callback that returns a promise))

Start Action Loader

启动动作加载器

• Argument 3 (callback) should be a function that returns a Promise (optional)

  参数3(回调)应为返回Promise(可选)的函数

• Argument 4 (snackbar) can be a boolean (true/false) or object (snackbar options) to enable showing snackbar when promise is resolved/rejected (optional)

  参数4(snackbar)可以是布尔值(true / false)或对象(snackbar选项)，以在承诺被解决/拒绝时显示小吃栏(可选)

this.$root.$dialogLoader.start(message, options, callback, snackbar)

Example:

例：

this.$root.$dialogLoader.start( 'Removing Someting...', { color: 'purple' }, promiseBasedFn, true )

Stop Action Loader (and Show Snackbar)

停止动作加载器(和显示小吃栏)

this.$root.$dialogLoader.stop(message, snackbarOptions, callback)

Example:

例：

this.$root.$dialogLoader.stop('I completed some action! Yay!', { timeout: 5000, location: 'top' }, () => { console.log( 'Callback after snackbar hidden' ) })

与确认对话框结合 (Combined with Confirm Dialog)

This can be combined with eolant's Vuetify Confirm Dialog (https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d) component to create a dialog along with loader and snackbar.

可以将其与eolant的Vuetify确认对话框( https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d )组件结合使用，以创建一个对话框以及加载程序和小吃栏。

Example: this.removeClientPromiseFn is a function that returns a promise after performing db actions

示例： this.removeClientPromiseFn 是执行数据库操作后返回promise的函数

async toggleDelete( client ){
  if( await this.$root.$confirm('Delete?', 'Are you sure you want to remove this client', { color: 'red' }) ){
    this.$root.$dialogLoader.start( 'Removing Client...', {}, this.removeClientPromiseFn, true )
  }
},

Another example just as a demo using setTimeout:

另一个示例，使用setTimeout作为演示：

async toggleDelete( client ){
  if( await this.$root.$confirm('Delete?', 'Are you sure you want to remove this client', { color: 'red' }) ){

    this.$root.$dialogLoader.start( 'Removing Client...', {}, () => {

      return new Promise((resolve, reject) => {
        setTimeout( ()=> {
          resolve()
          // reject( 'Unable to remove client!' )
        }, 3000 )
      })

    }, true )

  }
}

翻译自: https://vuejsexamples.com/vuetify-dialog-loader-with-snackbar-component/

snackbar