TgDialog 弹框
# TgDialog 弹框
# Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| footer | 是否显示footer | [Boolean, String] | false |
| header | 是否显示header | Boolean | true |
| title | 对话框的title | String | 对话框的标题 |
| width | 宽度 | String | 90% |
| cancelText | 取消按钮 | String | 取消 |
| confirmText | 确认按钮的文本 | Boolean | 保存 |
| confirmLoading | 是否出现清空按钮 | Boolean | false |
| class | class样式 | String | |
| canFullscreen | 最大化，默认不显示 | Boolean | false |
| canMini | 最小化，默认不显示 | Boolean | false |
| fullScreen | 是否全屏 | Boolean | false |
| visible | 是否显示 | Boolean | false |
| 继承el-dialog的所有属性 |
# Events
| 名称 | 说明 | 类型 | 参数 |
|---|---|---|---|
| cancel | 取消 | Functon | |
| confirm | 确认 | Functon | |
| beforeClose | 放大镜弹框，校验输入错误的回调 | Functon | |
| open | 打开 | Functon | |
| close | 关闭 | Functon | |
| handleMini | 最小化 | Functon | |
| recoverSize | 恢复最小化窗口 | Functon | |
| handleFullScreen | 全屏 | Functon | |
| showed | 打开以后的回调 | Functon |
# 示例代码
# 基本用法
<TgDialog
ref="testRef"
title="测试"
width="1200px"
@close="page.close">
</TgDialog>
<script>
//显示弹框
let testRef = ref()
function show() {
testRef.value.show()
}
function close() {
testRef.value.close()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 基本用法（修改属性）
<tg-button @click="show">显示dialog</tg-button>
<TgDialog
ref="testRef"
title="测试"
width="1200px" v-model="dialogVisible">
</TgDialog>
<script>
//显示弹框
let testRef = ref()
let dialogVisible=ref(false)
function show() {
dialogVisible.value=true
}
function close() {
dialogVisible.value=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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 弹框设置宽度
设置属性：width
<TgDialog
ref="testRef"
title="测试"
width="400px" >
</TgDialog>
<script>
//显示弹框
let testRef = ref()
function show() {
testRef.value.show()
}
function close() {
testRef.value.close()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 最大化最小化按钮是否显示
设置属性：canFullscreen，canMini
<TgDialog
ref="testRef"
title="测试"
width="1200px" :canFullscreen="true" :canMini="true">
</TgDialog>
<script>
//显示弹框
let testRef = ref()
function show() {
testRef.value.show()
}
function close() {
testRef.value.close()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 弹框打开默认全屏
设置属性：full-screen
<TgDialog
ref="testRef"
title="测试"
width="1200px" :full-screen="true">
</TgDialog>
<script>
//显示弹框
let testRef = ref()
function show() {
testRef.value.show()
}
function close() {
testRef.value.close()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 弹框关闭的回调函数
添加自定义事件：@close
<TgDialog
ref="testRef"
title="测试"
width="1200px" :full-screen="true" @close="closeDo">
</TgDialog>
<script>
function closeDo(){
alert(’弹框关闭，触发此事件‘)
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
上次更新: 2024/5/21 09:01:50