dialog类弹窗(vDialog)

使用和messagebox类弹窗类似,只是多了参数

单组件引入

import <name> from ‘vucc/dialog’;

特别说明


为了应对一些特殊需求,给dialog的展示体增加了 d-body样式,可以通过 querySelector('#id .d-body')
找到dialog的body以后,可以做一些特殊的操作,如控制滚动条之类的

示例



hi, 我是一个弹窗

hi, 我是一个弹窗

hi, 我是一个弹窗

hi, 我是一个弹窗




hi, 我是一个弹窗

hi, 我是一个弹窗

hi, 我是一个弹窗

hi, 我是一个弹窗



show dialog1
show dialog2

代码 V

<v-dialog :id="'dialog1'" :on-ok="dialogCallbackFn1" :on-cancel="dialogCallbackFn2">
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
</v-dialog>
<v-dialog :id="'dialog2'" :on-ok="dialogCallbackFn1" :on-cancel="dialogCallbackFn2" v-model="show">
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
    <div>hi, 我是一个弹窗</div>
</v-dialog>


// 展示对话框
showDialog(id) {
    this.$root.$$dialog[id].show();
},
showDialog2() {
    this.show = true;
},



属性

参数 说明 类型 可选值 默认值
id 必填,用于指代整个弹窗实例,后续调用时通过此id调用组件实例 String - -
title 弹出框主标题 String - -
cancelText 取消按钮的展示文字 String - ‘取 消’
okText 确定按钮的展示文字 String - ‘确 定’
hasHeader 是否有header头部 Boolean - true
hasFooter 是否有确定和取消按钮部分 Boolean - true
hasOkBtn 是否有确定按钮,仅当hasFooter为true时有效 Boolean - true
isShow 绑定外部变量,控制弹框是否显示,用v-model绑定 Boolean - false

方法

名称 说明 类型 可选值 默认值
onOk 确定按钮的回调函数,返回false可以阻止窗口关闭 Function - -
onCancel 取消按钮的回调函数 Function - -
onBeforeClose 窗口关闭前调用的函数,返回false可以阻止窗口关闭 Function - -
← 警告类弹窗(vAlert) 标签页(vTabs) →