v-dialogs对话框

刘欢2022/7/28原创大约 4 分钟约 1064 字

項目地址

安装

npm i v-dialogs

项目中引用插件

import Vue from 'vue'
import Dialogs from 'v-dialogs'

// Install v-dialogs globally
Vue.use(Dialogs, {
  ...global config options
})

// Globally instance call alert dialog
this.$dlg.alert('Hello World!')

函数调用

import { DialogAlert } from 'v-dialogs'
// Functional call alert dialog
DialogAlert('Hello World!')

可在插件注册时进行全局配置的参数

instanceName 指定插件实例名，默认情况下使用 $dlg 作为实例名且仅能在插件注册时进行设置

对话框图标

在消息对话框 Alert 中使用的图标来自于 (Elegant Themes)[https://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free]

操作按钮图标以及边角窗口 Toast 中使用的图标来自于 (IconFont)[https://www.iconfont.cn/]

实例

Alert

// Function call alert dialog
import { DialogAlert } from 'v-dialogs'
DialogAlert(message, [callback], [options])
// Globally instance call alert dialog
this.$dlg.alert(message, [callback], [options])

// show message in alert dialog, using information type by default
DialogAlert('Data saved successfully!')
// show message with close callback
DialogAlert('Data saved successfully!', () => {
  // dialog close callback
})
// show message with options
DialogAlert('Data saved successfully!', {
  messageType: 'success',
  language: 'en'
})
// show message with close callback and options
DialogAlert('Data saved successfully!', () => {
  // dialog close callback
}, {
  messageType: 'success',
  language: 'en'
})
// confirm type alert dialog will have one more button(cancel)
DialogAlert('Do you really want to leave?', {
  messageType: 'confirm',
  cancelCallback: () => {
    // do something when you click cancel button
  }
})

// Functional call modal dialog
import { DialogModal } from 'v-dialogs'
DialogModal(component, [options])
// Globally instance call modal dialog
this.$dlg.modal(component, [options])

// Some code for example
import { DialogAlert, DialogModal } from 'v-dialogs'
import Page from './Page.vue'
export default {
  methods: {
    open () {
      DialogModal(Page, {
        width: 350,
        height: 450,
        // send params to inner component
        params: {
          name: 'Terry Zeng'
        },
        // modal dialog close callback
        // data: inner component call 'this.$emit.('close', data)'
        // to close modal and return data
        callback: data => {
          // alert selected result
          DialogAlert(`You selected ${data.companyName} company`)
        }
      })
    }
  }
}

Toast

// Globally instance call toast dialog
import { DialogToast } from 'v-dialogs'
DialogToast(message, [callback], [options])
// Functional call toast dialog
this.$dlg.toast(message, [callback], [options])

// show message in toast dialog, using information type
// and show in bottom right corner by default
DialogToast('you got a new message!')
// show message with close callback
DialogToast('you got a new message!', () => {
  // toast close callback
})
// show message with options
DialogToast('you got a new message!', {
  messageType: 'warning',
  closeTime: 3 // auto close dialog time(second)
})
// show message with close callback and options
DialogToast('you got a new message!', () => {
  //toast close callback
}, {
  messageType: 'warning',
  closeTime: 3
})

Mask

// Globally instance call mask dialog
import { DialogMask } from 'v-dialogs'
DialogMask([message], [callback], [options])
// Functional call mask dialog
this.$dlg.mask([message], [callback], [options])

Helper 工具集

关闭

close(key?: string): void 关闭一个指定键值的窗口，若不指定键值，则关闭最后一个打开的窗口

import { DialogMask, DialogHelper } from 'v-dialogs'
// Open a mask layer and get dialog key
const key = DialogMask()
doSomeJobStuff().then(() => {
  // Close mask layer by dialog key
  DialogHelper.close(key)
})

关闭所有

closeAll(): void 一次性关闭所有弹出窗口

import { DialogHelper } from 'v-dialogs'

fetchData()
  .then(() => {
    // Do fetch data success work
    ...
  })
  .catch(error => {
    // Login state timeout for example
    if (error.isLoginTimeout) {
      // Close all opened dialogs
      DialogHelper.closeAll()
      // Redirect to login page
      router.push({ path: '/login' })
    }
  })

入参选项

选项名	类型	参数描述	默认值	范围
messageType	string	对话框消息类型 1. 'info' 2. 'warning' 3. 'error' 4. 'success' 5. 'confirm'	'info'	Alert, Toast
title	string	boolean	模态窗口标题栏显示的标题内容，可设置为 false 来关闭标题栏	'Dialog'
width	number	窗口宽度	700	Modal
height	number	窗口高度	400	Modal
params	object	向模态窗口载入的页面传递参数，在载入的页面中设置 props:{ xxx: Type } 来获取传递的参数	undefined	Modal
closeButton	boolean	关闭按钮是否显示	TRUE	Modal, Toast
maxButton	boolean	最大化窗口按钮是否显示	TRUE	Modal
position	string	边角位置指定 1. 'topLeft' 2. 'topCenter' 3. 'topRight' 4. 'bottomLeft' 5. 'bottomCenter' 6. 'bottomRight'	'bottomRight'	Toast
singletonKey	string	为窗口设置一个键值，保证该键值的窗口只会被打开一个	undefined	All
language	string	窗口使用语言 1. 'cn' - Chinese 2. 'en' - English 3. 'jp' - Japanese 4. 'pt' - Portuguese	'cn'	All
icon	boolean	显示消息类型图标	TRUE	Alert, Toast
customClass	string	自定义样式名	undefined	All
shaking	boolean	对话框之外的区域点击时，是否让对话框显示抖动的动画	TRUE	Modal, Alert, Mask
closeTime	number	boolean	自动关闭窗口时间（单位：秒）, 设置为 false 以禁用自动关闭窗口功能	FALSE
cancelCallback	number	boolean	关闭窗口的回调, 在以下的情况下触发: 点击右上角的关闭按钮 (Model,Toast 模式下) 在消息对话框（Alert）的 confirm 模式下，点击 "cancel" 按钮	FALSE
fullscreen	boolean	以最大化形式打开窗口	FALSE	Modal