v-dialogs v2.1.3，简洁的指令式对话框插件

[Terry05]

更新内容：

• 使用 render 函数的方式完全重构插件
• 修改 prop dialogCloseButton 名称为 closeButton
• 修改 prop dialogMaxButton 名称为 maxButton
• 新增 prop icon，设置是否显示消息类型图标
• 新增 prop customClass，设置自定义样式的类名
• 新增 prop shaking，设置对话框外部区域点击时，是否显示抖动的动画
• 使用 Javascript Standard 语法标准对项目进行格式化

v-dialogs

一款基于 Vue2 的干净简洁的指令式对话框组件，它包含了 Modal、Alert、Mask 和 Toast 等功能形态

实例和文档

• English site
• 国内站点

用法

// 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)

[deathscythe]

不觉得放大窗口的按钮跟关闭按钮不水平对齐么?

[Terry05]

@deathscythe 最大化的图标通常都会在中轴位置偏上，可以观察一下 Windows 窗口最大化的图标