Vuetify Pro Dialog
函数式调用Vuetify Snackbar
和 Dialog
的插件
查看演示
安装
安装依赖
# npm
npm i vuetify-pro-dialog -S
# yarn
yarn add vuetify-pro-dialog
# pnpm
pnpm add vuetify-pro-dialog
配置
import VuetifyProDialog, { InstallationOptions } from 'vuetify-pro-dialog'
// 额外配置,可选,text也可使用国际化函数
const actions: Omit<InstallationOptions, 'vuetify'> = {
false: {},
true: {},
confirm: {
false: {
text: () => locale.i18nRender('dialog.cancel.text'),
color: 'error'
},
true: {
text: () => locale.i18nRender('dialog.ok.text'),
color: 'primary'
},
width: 450
},
alert: {},
prompt: {}
}
App.use(VuetifyProDialog, {
vuetify,
...actions
})
i18n国际化
import { locale } from 'vuetify-pro-dialog'
locale.setMessage('en', {
'dialog.cancel.text': 'cancel',
'dialog.ok.text': 'ok'
})
locale.set('en_US')
国际化默认zh_CN和en_US两种,如需添加请属使用
locale.setMessage
函数
RTL
this.$vuetify.rtl = true
this.$dialog.setRTL(true) // 设置RTL必须调用setRTL函数,不然会还原
使用
Message
this.$dialog.message('这是一段信息')
this.$dialog.message.info('这是一段信息')
this.$dialog.message.success('这是一段信息')
this.$dialog.message.warning('这是一段信息')
this.$dialog.message.error('这是一段信息')
// 或使用
import { Message } from 'vuetify-pro-dialog'
Message.open('这是一段信息')
Message.info('这是一段信息')
Message.success('这是一段信息')
Message.warning('这是一段信息')
Message.error('这是一段信息')
更新message
this.$dialog.message('这是一段信息', { key: 'test' })
this.$dialog.message('这是第二段信息', { key: 'test' })
Notify
this.$dialog.notify('这是一段信息')
this.$dialog.notify.info('这是一段信息')
this.$dialog.notify.success('这是一段信息')
this.$dialog.notify.warning('这是一段信息')
this.$dialog.notify.error('这是一段信息')
// 或使用
import { Message } from 'vuetify-pro-dialog'
Message.notify.open('这是一段信息')
Message.notify.info('这是一段信息')
Message.notify.success('这是一段信息')
Message.notify.warning('这是一段信息')
Message.notify.error('这是一段信息')
Loading
const loading = this.$dialog.loading('加载中...')
setTimeout(() => { loading.close() }, 5000)
// 或使用
import { Message } from 'vuetify-pro-dialog'
const loading = Message.loading('加载中...')
setTimeout(() => { loading.close() }, 5000)
Comfirm
const res = await this.$dialog.comfirm('是否确认删除?')
// 或使用
import { MessageBox } from 'vuetify-pro-dialog'
const res = await MessageBox.comfirm('是否确认删除?')
Alert
const res = await this.$dialog.alert('是否确认删除?')
// 或使用
import { MessageBox } from 'vuetify-pro-dialog'
const res = await MessageBox.alert('是否确认删除?')
Prompt
const res = await this.$dialog.prompt('密码', {
rules: [(v: string) => !!v || '请输入密码'],
textFieldProps: { type: 'possword' },
beforeClose: (text: string) => {
// 异步操作放此处,必须返回promise, 返回true表示继续, false表示暂停错误
return new Promise(resolve => {
setTimeout(() => resolve(true), 2000)
})
}
})
// 或使用
import { MessageBox } from 'vuetify-pro-dialog'
const res = await MessageBox.prompt('密码', {
rules: [(v: string) => !!v || '请输入密码'],
textFieldProps: { type: 'possword' },
beforeClose: (text: string) => {
return new Promise(resolve => {
setTimeout(() => resolve(true), 2000)
})
}
})
CloseAll
this.$dialog.message.closeAll() // 关闭所有message
this.$dialog.msgbox.closeAll() // 关闭所有messagebox
// 或使用
import { Message, MessageBox } from 'vuetify-pro-dialog'
Message.closeAll()
MessageBox.closeAll()