index.vue
2.82 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
<template>
<div class="container">
<div class="doc-title zan-hairline--bottom">DIALOG</div>
<div class="zan-btns" style="margin-top: 30vh;">
<button class="zan-btn" @click="toggleBaseDialog">基础 Dialog</button>
<button class="zan-btn" @click="toggleWithoutTitleDialog">Dialog - 无标题</button>
<button class="zan-btn" @click="toggleButtonDialog">Dialog - 自定义显示按钮</button>
<button class="zan-btn" @click="toggleVerticalDialog">Dialog - 按钮纵向排布</button>
</div>
<ZanDialog v-bind="zanDialog"/>
</div>
</template>
<script>
import ZanDialog from '../../components/zan/dialog'
export default {
components: {
ZanDialog
},
data () {
return {
zanDialog: {
'name': '',
'show': false,
'title': '',
'content': '',
'buttons': [],
'buttonsShowVertical': true,
res: {}
}
}
},
methods: {
...ZanDialog.methods,
toggleBaseDialog () {
const obj = {
title: '弹窗',
content: '这是一个模态弹窗',
showCancel: true
// date: new Date()
}
this.showZanDialog(obj).then(() => {
console.log('=== dialog ===', 'type: confirm')
}).catch(() => {
console.log('=== dialog ===', 'type: cancel')
})
},
toggleWithoutTitleDialog () {
const obj = {
content: '这是一个模态弹窗'
}
this.showZanDialog(obj).then(() => {
console.log('=== dialog without title === type: confirm')
})
},
toggleButtonDialog () {
const obj = {
title: '弹窗',
content: '这是一个模态弹窗',
buttons: [{
text: '现金支付',
color: 'red',
type: 'cash'
}, {
text: '微信支付',
color: '#3CC51F',
type: 'wechat'
}, {
text: '取消',
type: 'cancel'
}]
}
this.showZanDialog(obj).then(({type}) => {
console.log('=== dialog with custom buttons === type: ' + type)
})
},
toggleVerticalDialog () {
const obj = {
title: '弹窗',
content: '这是一个模态弹窗',
buttonsShowVertical: true,
buttons: [{
text: '现金支付',
color: 'red',
type: 'cash'
}, {
text: '微信支付',
color: '#3CC51F',
type: 'wechat'
}, {
text: '取消',
type: 'cancel'
}]
}
this.showZanDialog(obj).then(({type}) => {
console.log('=== dialog with vertical buttons === type: ' + type)
})
}
}
}
</script>
<style scoped>
</style>