Hawthorn-Api

# HtDialog 说明

HtDialog 自定义弹窗组件，基于el-dialog
Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

普通弹出 抽屉浮动 
<template>
  <div>
    <ht-button icon="ht-icon-chuangkou01" @click="dialogVisible=!dialogVisible">普通弹出</ht-button>
    <ht-button icon="ht-icon-chuangkou01" @click="drawerVisible=!drawerVisible">抽屉浮动</ht-button>
    <div v-if="dialogVisible" ref="dialogDemo" :visible.sync="dialogVisible" >
      <ht-dialog title="弹出窗口样例" :visible.sync="dialogVisible">
        <div style="text-align:left">
          <p>自定义窗口组件demo</p>
          <p>1. 支持 弹出窗口拖拽</p>
          <p>2. 支持 当前tab页弹出，可切换tab页</p>
          <p>3. 支持 各个tab页都可弹出窗口</p>
        </div>
      </ht-dialog>
    </div>
    <ht-drawer v-if="drawerVisible" ref="drawerDemo" :visible.sync="drawerVisible" >
    <div>
      抽屉窗口样例
    </div>
    </ht-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      drawerVisible: false
    } 
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Expand Copy

# API

# Dialog Attributes

参数 说明 类型 可选值 默认值
visible 设置是否可见 Boolean true / false true
title 设置窗口标题 String — 标题
width 设置窗口宽度 String — 75%
height 设置窗口高度 String — —
nest 设置是否嵌套窗口 Boolean true / false false
append-to-body 设置是否添加在body上 Boolean true / false false
has-footer 设置是否带footer Boolean true / false true
fullscreen 设置是否全屏 Boolean true / false false
max-height 设置最大高度 String — —
closeOnClickModal 设置是否点击遮挡层关闭 Boolean true / false false
closeOnPressEscape 设置是否点击esc关闭 Boolean true / false true

# Dialog Event

方法名 说明 参数
close 关闭窗口响应方法 (event)
closed 窗口动画关闭后响应方法 (event)
open 打开窗口响应方法 (event)
opened 窗口动画打开后响应方法 (event)

# 版本

  • v1.2.2

← HtBodyDialog弹窗 →