modal.d.ts
5.26 KB
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
// Type definitions for iview 3.3.1
// Project: https://github.com/iview/iview
// Definitions by: yangdan
// Definitions: https://github.com/yangdan8/iview.git
import Vue, { VNode, CreateElement } from "vue";
export declare class Modal {
/**
* 对话框是否显示,可使用 v-model 双向绑定数据。
* @default false
*/
value?: boolean;
/**
* 对话框标题,如果使用 slot 自定义了页头,则 title 无效
*/
title?: string;
/**
* 是否显示右上角的关闭按钮,关闭后 Esc 按键也将关闭,
* @default true
*/
closable?: boolean;
/**
* 是否允许点击遮罩层关闭
* @default true
*/
"mask-closable"?: boolean;
/**
* 点击确定按钮时,确定按钮是否显示 loading 状态,开启则需手动设置visible来关闭对话框,
* @default false
*/
loading?: boolean;
/**
* 页面是否可以滚动
* @default false
*/
scrollable?: boolean;
/**
* 是否全屏显示
* @default false
*/
fullscreen?: boolean;
/**
* 是否可以拖拽移动
* @default false
*/
draggable?: boolean;
/**
* 是否显示遮罩层,开启 draggable 时,强制不显示
* @default true
*/
mask?: boolean;
/**
* 确定按钮文字
* @default 确定
*/
"ok-text"?: string;
/**
* 取消按钮文字
* @default 取消
*/
"cancel-text"?: string;
/**
* 对话框宽度,单位 px。
* 对话框的宽度是响应式的,当屏幕尺寸小于 768px 时,宽度会变为自动auto,
* @default 520
*/
width?: number | string;
/**
* 不显示底部
* @default false
*/
"footer-hide"?: boolean;
/**
* 设置浮层样式,调整浮层位置等,该属性设置的是.ivu-modal的样式
*/
style?: object;
/**
* 设置对话框容器.ivu-modal-wrap的类名,可辅助实现垂直居中等自定义效果
*/
"class-name"?: string;
/**
* 层级
* @default 1000
*/
"z-index"?: number;
/**
* 自定义显示动画,第一项是模态框,第二项是背景,
* @default ['ease', 'fade']
*/
"transition-names"?: Array<string>;
/**
* 是否将弹层放置于 body 内,默认值true
* @default true
*/
transfer?: boolean;
/**
* 点击确定的回调
*/
$emit(eventName: "on-ok"): this;
/**
* 开关变化时触发,返回当前的状态
*/
$emit(eventName: "on-cancel"): this;
/**
* 开关变化时触发,返回当前的状态
*/
$emit(eventName: "on-visible-change", visible: boolean): this;
/**
* slot插槽对象
*/
$slots: {
/**
* 对话框主体内容
*/
"": VNode[];
/**
* 自定义页头
*/
header: VNode[];
/**
* 自定义页脚内容
*/
footer: VNode[];
/**
* 自定义右上角关闭内容
*/
close: VNode[];
};
}
export declare class ModalInstance {
/**
* 消息
* @param config ModalConfig为相关配置,string为待显示的内容
*/
info(config?: ModalConfig | string): void;
/**
* 成功
* @param config ModalConfig为相关配置,string为待显示的内容
*/
success(config?: ModalConfig | string): void;
/**
* 警告
* @param config ModalConfig为相关配置,string为待显示的内容
*/
warning(config?: ModalConfig | string): void;
/**
* 错误
* @param config ModalConfig为相关配置,string为待显示的内容
*/
error(config?: ModalConfig | string): void;
/**
* 对话框
* @param config ModalConfig为相关配置,string为待显示的内容
*/
confirm(config?: ModalConfig | string): void;
/**
* 移除
*/
remove(): void;
}
export declare class ModalConfig {
/**
* 标题或者Element选择器字符串
*/
title?: string;
/**
* 内容或者Element选择器字符串
*/
content?: string;
/**
* 自定义内容,使用后不再限制类型, content 也无效。
* @param h Render函数
*/
render?: (h?: CreateElement) => void;
/**
* 宽度,单位 px
* @default 416
*/
width?: number | string;
/**
* 确定按钮的文字
* @default 确定
*/
okText?: string;
/**
* 取消按钮的文字,只在Modal.confirm()下有效
* @default 取消
*/
cancelText?: string;
/**
* 点击确定按钮时,确定按钮是否显示 loading 状态,开启则需手动调用Modal.remove()来关闭对话框
* @default false
*/
loading?: boolean;
/**
* 页面是否可以滚动
* @default false
*/
scrollable?: boolean;
/**
* 页面是否可以滚动
* @default false
*/
closable?: boolean;
/**
* 点击确定的回调
*/
onOk?: () => void;
/**
* 点击取消的回调,只在Modal.confirm()下有效
*/
onCancel?: () => void;
}
declare module "vue/types/vue" {
interface Vue {
/**
* 对话框
*/
$Modal: ModalInstance;
}
}