messageBox弹窗(vMessageBox)

和其他一样,messagebox也有两种调用方式,
可以使用标签加show方法的调用方式,也可以使用直接调用方法展示的方式,具体可以参看综合示例

单组件引入

import <name> from ‘vucc/messagebox’;

示例







msgBox info
msgBox success
msgBox error
msgBox confirm


messagebox 第二种调用方法

代码 V

<v-message-box :id="'mb1'" type="info" :title="'这是一条通知信息'" :explain="'一些解释'" :on-ok="dialogCallbackFn1"></v-message-box>
<v-message-box :id="'mb2'" type="success" :title="'这是一条通知信息'" :explain="'一些解释'"></v-message-box>
<v-message-box :id="'mb3'" type="error" :title="'这是一条通知信息'" :explain="'一些解释'"></v-message-box>
<v-message-box :id="'mb4'" type="confirm" :title="'您是否确认要删除这项内容'" :explain="'一些解释'" :on-cancel="dialogCallbackFn1"></v-message-box>


// message box
showMb(id) {
    this.$root.$$messageBox[id].show();
},
showMb2(id) {
    // 这种用法会返回messageBox实例，可以对实例进行后续操作
    window.MessageBox.init({
        type: 'confirm',
        title: '标题',
        explain: '我就是一个解释!',
        onOk() {
            console.log('我是OK!');
        }
    });
},



属性

参数 说明 类型 可选值 默认值
id 必填,用于指代整个弹窗实例,后续调用时通过此id调用组件实例 String - -
type 弹窗的类型 String success/confirm/error/info info
title 弹出框主标题 String - -
explain 弹出框说明文字,弹出框说明文字,当isUseHtml打开时,将可以传入dom结构 String - -
cancelText 取消按钮的展示文字 String - ‘取 消’
okText 确定按钮的展示文字 String - ‘确 定’
isUseHtml explain属性可以传入html片段,有安全风险,使用前请评估 Boolean - false

方法

方法名 说明 类型 可选值 默认值
onOk 确定按钮的回调函数 Function - -
onCancel 取消按钮的回调函数 Function - -
← tips弹窗(vTips) 警告类弹窗(vAlert) →