Honeycomb Design

# 对话框 Dialog

在保留当前页面状态的情况下，告知用户并承载相关操作。

# 基础用法

点击打开dialog
对话框内容
基本用法

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

<title>基本用法</title>
<describe>包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
    <hc-button @click="handleDialogOpen">点击打开dialog</hc-button>
    <hc-dialog v-model="visible" title="对话框" size="small">
      <div>对话框内容</div>
    </hc-dialog>
</template>
<script>
export default {
    data: function () {
        return {
          visible: false
        }
    },
     methods: {
       handleDialogOpen: function () {
         this.visible = true
       }
     }
}
</script>

# 自定义对话框的宽高

点击打开dialog
对话框内容
自定义宽高

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

<title>自定义宽高</title>
<describe>包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
    <hc-button @click="handleDialogOpen">点击打开dialog</hc-button>
    <hc-dialog v-model="visible" title="对话框" :width="500" :height="500">
      <div>对话框内容</div>
    </hc-dialog>
</template>
<script>
export default {
    data: function () {
        return {
          visible: false
        }
    },
     methods: {
       handleDialogOpen: function () {
         this.visible = true
       }
     }
}
</script>

# 工具栏配置

点击打开dialog
对话框内容
工具栏配置

配置对话框工具栏，可以承载相关的业务操作，注意工具栏按钮点击会默认关闭对话框，如果需要阻止关闭需要返回reject状态的异步对象

<title>工具栏配置</title>
<describe>配置对话框工具栏，可以承载相关的业务操作，注意工具栏按钮点击会默认关闭对话框，如果需要阻止关闭需要返回reject状态的异步对象</describe>
<template>
    <hc-button @click="handleDialogOpen">点击打开dialog</hc-button>
    <hc-dialog
      v-model="visible"
      title="对话框"
      size="small"
      :toolbar="toolbar"
    >
      <div>对话框内容</div>
    </hc-dialog>
</template>
<script>
export default {
    data: function () {
        return {
          visible: false
        }
    },
    computed: {
      toolbar: function () {
        return [
          {
            label: '取消',
            name: 'cancel'
          },
          {
            label: '保存',
            name: 'save',
            type: 'primary',
            click: function () {
              // 建模在线编码需要使用$util.deffer和$_.delay代替Promise和setTimeout
              return new Promise(function (resolve, reject) {
                setTimeout(function(){
                  resolve()
                }, 2000)
              })
            }
          },
          {
            label: '阻止关闭',
            name: 'reject',
            click: function () {
             // 建模在线编码需要使用$util.deffer代替Promise
              return new Promise(function (resolve, reject) {
                reject()
              })
            }
          }
        ]
      }
    },
    methods: {
      handleDialogOpen: function () {
        this.visible = true
      }
    }
}
</script>

# 属性及事件

# HcDialog属性

参数 说明 类型 可选值 默认值
title 对话框标题 string -- --
size 对话框尺寸 string mini / small / normal / large normal
toolbar 对话框工具栏按钮，配置详见 array -- --
visible 对话框是否显示，支持v-model boolean -- false
draggable 对话框是否可拖动 boolean -- false
width 对话框宽度 number -- --
height 对话框高度 number -- --

# HcDialog插槽

名称 说明
default 对话框内容

← 加载 Loading →