Dialog对话框

✨简单用法

Dialog 弹出一个对话框，可设置显示的内容。

这是一段信息 点我打开dialog

<template>
  <div>
      <wb-dialog 
              :visible="visible"
              title="提示"
              :showClose="true"
              :modal="true"
              @closeBefore="beforeClose"
      >
          <template slot="header"> 头部标题 </template>
          <template>
                  <span>这是一段信息</span>
          </template>
          <template slot="footer">
              <wb-button  @click="visible = false">确认</wb-button>
              <wb-button  @click="visible = false">取消</wb-button>
          </template>
      </wb-dialog>
      <wb-button @click="visible=!visible">点我打开dialog</wb-button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            visible:false
        }
    },
    methods:{
        beforeClose(e){
            this.visible = e
        }
    }
}
</script>

显示代码 复制代码 复制代码

✨自定义内容

Dialog 组件的内容可以是任意的,下面是使用wb-input的案例。

站点名称

站点网址

打开嵌套表单的dialog

<template>
  <div>
      <wb-dialog 
              :visible="visible"
              title="提示"
              :showClose="true"
              :modal="true"
              @closeBefore="beforeClose"
      >
          <template>
              <div class="a">
                  <span style="margin-right: 1em">站点名称</span>
                  <wb-input v-model="aaa"></wb-input>
              </div>
              <div class="b" style="margin-top:1em">
                  <span style="margin-right: 1em">站点网址</span>
                  <wb-input v-model="bbb"></wb-input>
              </div>
          </template>
          <template slot="footer">
              <wb-button  @click="visible = false">确认</wb-button>
              <wb-button  @click="visible = false">取消</wb-button>
          </template>
      </wb-dialog>
      <wb-button @click="visible=!visible">打开嵌套表单的dialog</wb-button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            visible:false
        }
    },
    methods:{
        beforeClose(e){
            this.visible = e
        }
    }
}
</script>

显示代码 复制代码 复制代码

✨支持不同宽度

dialog同时也支持不同宽度展示，通过dialogWidth属性设置，默认是30%。

这是一段消息 打开不同宽度的dialog

<template xmlns="http://www.w3.org/1999/html">
    <div>
        <wb-dialog
                :visible="visible"
                title="提示"
                :showClose="true"
                :modal="true"
                @closeBefore="beforeClose"
                dialogWidth="70%"
        >
            <template>
                <span>这是一段消息</span>
            </template>
            <template slot="footer">
                <wb-button @click="visible = false">确认</wb-button>
                <wb-button @click="visible = false">取消</wb-button>
            </template>
        </wb-dialog>
        <wb-button @click="visible=!visible">打开不同宽度的dialog</wb-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                visible: false
            }
        },
        methods: {
            beforeClose(e) {
                this.visible = e
            }
        }
    }
</script>

显示代码 复制代码 复制代码

📌 Dialog Attributes

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog	boolean	—	false
title	Dialog 的标题，也可通过具名 slot 传入	string	—	—
showClose	是否显示关闭按钮	boolean	—	true
modal	是否开启背景遮罩层	boolean	—	true
dialogWidth	Dialog 的宽度	string	—	30%
closeBefore	关闭前的回调，会暂停 Dialog 的关闭	function	—	—

📌 Dialog Slot

name	说明
title	Dialog 的标题
—	Dialog 的内容区
footer	Dialog 的底部按钮操作区