Blame view

node_modules/mpvue-zanui/src/pages/zan_dialog/index.vue 2.82 KB
ce4c83ff   wxy   初始提交
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>