V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1882 天前的主题，其中的信息可能已经有所发展或是发生改变。

更新内容：

使用 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)

modal