更新内容:
- 使用 render 函数的方式完全重构插件
- 修改 prop dialogCloseButton 名称为 closeButton
- 修改 prop dialogMaxButton 名称为 maxButton
- 新增 prop icon,设置是否显示消息类型图标
- 新增 prop customClass,设置自定义样式的类名
- 新增 prop shaking,设置对话框外部区域点击时,是否显示抖动的动画
- 使用 Javascript Standard 语法标准对项目进行格式化
v-dialogs
一款基于 Vue2 的干净简洁的指令式对话框组件,它包含了 Modal、Alert、Mask 和 Toast 等功能形态
实例和文档
用法
// include and install in main.js
import Vue from 'vue'
import vDialog from 'v-dialogs'
Vue.use(vDialog)
// in everywhere
// Modal
import UserProfile from './UserProfile.vue'
this.$dlg.modal(UserProfile, {
width: 400,
height: 300,
title: 'User Profile',
params: {
userId: 1,
userName: 'Terry Zeng'
},
callback: data => {
this.$dlg.alert(`Received message: ${data}`)
}
})
// Alert
this.$dlg.alert('message', callback, options)
// Mask
const key = this.$dlg.mask('Data loading, please hold on a moment...')
// do some stuff
job().then(resp => {
// close mark layer when job done
this.$dlg.close(key)
})
// Toast
this.$dlg.taost('message', callback, options)
