对话框

对话框的处理可以直接使用 iview 的 Modal 组件,但是不方便的地方就是需要在使用它的组件某个地方定义。

Vuecoms 提供了通用的对话框组件以及可以通过绑定到 Vue.prototype.$Dialog 和 Vue.prototype.$ConfirmDialog 来直接调用,简化了对话框的定义。

示例一,$Dialog

Show Modal

演示了:

  1. 定义一个组件,通过 this.$Dialog 直接在对话框加打开,不需要定义 Modal 了
  2. 使用 $Dialog 时,可以自定义按钮。

Dialog 属性 props (和 Modal 基本类似)

属性 说明 类型 缺省值
component 底层组件,可以是组件名称(需要全局注册)也可以是组件对象或异步组件。 String Object
title 对话框标题 String ''
props 传递给底层组件的属性 Object
on 将要捕获底层组件的事件及处理。key 是事件名,value 是处理函数 Object
onOk 点击确定时调用的回调函数。当点击时确定按钮会显示 loading 状态,如果 onOk 定义了,则当它返回 true 时,会自动关闭对话框。如果返回 false,则对话框仍然显示,loading 状态取消。如果未定义 onOk,则直接关闭对话框. onOk 可以是 Promise 对象。 Function Promise
onCancel 当点击取消时的回调函数,可以是 Promise 对象。 Function Promise
buttons 自定义按钮。同 Grid, Build 的按钮定义形式相同。 Array
buttonSize 按钮大小。可以是 large, small, default String 'default'
width 对话框宽度,用 px 表示 String
closable 是否显示右上角关闭按钮 Boolean true
maskClosable 是否点击遮罩时关闭对话框 Boolean true
draggable 是否可以拖动对话框 Boolean false

Dialog 方法

名称 说明
close 关闭当前对话框

示例二,$ConfirmDialog

它的作用是显示一个用于输入的对话框,因此要传入 value 属性,同时要执行底层组件的 validate 和 getData 方法,来校验和获取数据。然后将得到的数据传给 onOk 回调函数。如果 onOk 处理成功,应返回 true。validate 和 getData 都可以省略。

Show Modal

ConfirmDialog 属性 props (和 Dialog 基本类似)

属性 说明 类型 缺省值
component 底层组件,可以是组件名称(需要全局注册)也可以是组件对象或异步组件。 String Object
title 对话框标题 String ''
props 传递给底层组件的属性 Object
on 将要捕获底层组件的事件及处理。key 是事件名,value 是处理函数 Object
value 传入给底层组件的 value 属性 Any
onOk 点击确定时调用的回调函数。当点击时确定按钮会显示 loading 状态,如果 onOk 定义了,则当它返回 true 时,会自动关闭对话框。如果返回 false,则对话框仍然显示,loading 状态取消。如果未定义 onOk,则直接关闭对话框. onOk 可以是 Promise 对象。 Function Promise
onCancel 当点击取消时的回调函数,可以是 Promise 对象。 Function Promise
buttons 自定义按钮。同 Grid, Build 的按钮定义形式相同。 Array
buttonSize 按钮大小。可以是 large, small, default String 'default'
width 对话框宽度,用 px 表示 String
closable 是否显示右上角关闭按钮 Boolean true
maskClosable 是否点击遮罩时关闭对话框 Boolean true
draggable 是否可以拖动对话框 Boolean false

Dialog 方法

名称 说明
close 关闭当前对话框