echo_msg_box

功能说明

适用于vue项目的模态对话框组件, 窗口被关闭后, 它默认会返回一个Promise对象便于进行后续操作的处理。具体参数见下方选项说明。参数命名及说明参考了Element-UI的设计。

npm安装

npm install echo_msg_box --save

使用

main.js:
import echo_msg_box from "echo_msg_box";
Vue.use(echo_msg_box);

foo.vue:
this.$echoMsgBox({
    options
}).then(res=>{// 通过点击确定按钮关闭的回调}).catch(err=>{// 通过点击取消按钮, 关闭图标, 遮罩层关闭的回调});

选项

参数: title
说明: 弹框标题
类型: String
默认值: '提示'

参数: message
说明: 弹框消息正文
类型: String
默认值: '这是一条提示'

参数: dangerouslyUseHTMLString
说明: 是否将 message 属性作为 HTML 片段处理
类型: Boolean
默认值: false

参数: type
说明: 消息类型,不同消息类型对应不同的图标
类型: String
默认值: 'info'
可选值: 'info','success','warning','error'

参数: iconClass
说明: 自定义图标的类名，会覆盖 type参数, 添加在.msg-box .hint上
类型: String

参数: customClass
说明: 弹框的自定义类名, 添加在.msg-box上
类型: String

参数: showClose
说明: 是否显示关闭按钮
类型: Boolean
默认值: true

参数: roundButton
说明: 是否使用圆角按钮
类型: Boolean
默认值: false

参数: closeOnClickModal
说明: 是否可通过点击遮罩关闭弹框
类型: Boolean
默认值: true

参数: callback
说明: 若不使用 Promise，可以使用此参数指定弹框关闭后的回调
类型: (action, instance) => {}。action 的值为'confirm'或'cancel'; instance 为弹框实例，可以通过它访问实例上的属性和方法
默认值: undefined
举例：callback: (action, instance) => {
             console.log(action);
             console.log(instance);
           }

参数: beforeClose
说明: 弹框关闭前的回调，会暂停实例的关闭
类型:  (action, instance, done) => {}。action 的值为'confirm'或'cancel'；instance 为弹框实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例
默认值: undefined
举例： beforeClose: (action, instance, done) => {
              console.log(action);
              console.log(instance.title);
              done();
            }

参数: lockScroll
说明: 是否在弹框出现时将body滚动锁定
类型: Boolean
默认值: true

参数: showCancelButton
说明: 是否展示取消按钮
类型: Boolean
默认值: true

参数: showConfirmButton
说明: 是否展示确定按钮
类型: Boolean
默认值: true

参数: cancelButtonText
说明: 取消按钮文字
类型: String
默认值: '取消'

参数: confirmButtonText
说明: 确定按钮文字
类型: String
默认值: '确定'

参数: cancelButtonClass
说明: 取消按钮的自定义类名
类型: String

参数: confirmButtonClass
说明: 确定按钮的自定义类名
类型: String

参数: closeOnPressEscape
说明: 是否可通过按下 ESC 键关闭弹框
类型: Boolean
默认值: true