Blame view

examples/routers/modal.vue 3.52 KB
6259471f   梁灏   support Modal
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
  <template>
      <div>
          <i-button @click.native="instance('info')">消息</i-button>
          <i-button @click.native="instance('success')">成功</i-button>
          <i-button @click.native="instance('warning')">警告</i-button>
          <i-button @click.native="instance('error')">错误</i-button>
      </div>
  </template>
  <script>
      export default {
          methods: {
              instance (type) {
                  const title = '对话框的标题';
                  const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
                  switch (type) {
                      case 'info':
                          this.$Modal.info({
                              title: title,
                              content: content
                          });
                          break;
                      case 'success':
                          this.$Modal.success({
                              title: title,
                              content: content
                          });
                          break;
                      case 'warning':
                          this.$Modal.warning({
                              title: title,
                              content: content
                          });
                          break;
                      case 'error':
                          this.$Modal.error({
                              title: title,
                              content: content
                          });
                          break;
                  }
              }
          }
      }
  </script>
  
  
  <!--<template>-->
      <!--<div>-->
          <!--<i-button @click.native="confirm">标准</i-button>-->
          <!--<i-button @click.native="custom">自定义按钮文字</i-button>-->
          <!--<i-button @click.native="async">异步关闭</i-button>-->
      <!--</div>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--methods: {-->
              <!--confirm () {-->
                  <!--this.$Modal.confirm({-->
                      <!--title: '确认对话框标题',-->
                      <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
                      <!--onOk: () => {-->
                          <!--console.log('确定');-->
  <!--//                        this.$Message.info('点击了确定');-->
                      <!--},-->
                      <!--onCancel: () => {-->
                          <!--console.log('取消');-->
  <!--//                        this.$Message.info('点击了取消');-->
                      <!--}-->
                  <!--});-->
              <!--},-->
              <!--custom () {-->
                  <!--this.$Modal.confirm({-->
                      <!--title: '确认对话框标题',-->
                      <!--content: '<p>一些对话框内容</p><p>一些对话框内容</p>',-->
                      <!--okText: 'OK',-->
                      <!--cancelText: 'Cancel'-->
                  <!--});-->
              <!--},-->
              <!--async () {-->
                  <!--this.$Modal.confirm({-->
                      <!--title: '确认对话框标题',-->
                      <!--content: '<p>对话框将在 2秒 后关闭</p>',-->
                      <!--loading: true,-->
                      <!--onOk: () => {-->
                          <!--setTimeout(() => {-->
                              <!--this.$Modal.remove();-->
  <!--//                            this.$Message.info('异步关闭了对话框');-->
                          <!--}, 2000);-->
                      <!--}-->
                  <!--});-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->