chenhaodong / mew-iview

Blame view

local/routers/notice.vue 3.98 KB
Edit Raw Normal View History
7570318b   梁灏   fixed Tooltip pla... 
1
2
 
  <style>
      .tooltip_out{
4dfacfca   梁灏   publish Tooltip c... 
3
 
          padding: 150px;
7570318b   梁灏   fixed Tooltip pla... 
4
5
 
      }
      body{
bf962a69   梁灏   remove Row css - ... 
6
 
          height: 1000px;
7570318b   梁灏   fixed Tooltip pla... 
7
8
 
          padding: 10px;
      }
9b784016   梁灏   update Poptip styles 
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
      .api table{
          font-family: Consolas,Menlo,Courier,monospace;
          font-size: 13px;
          border-collapse: collapse;
          border-spacing: 0;
          empty-cells: show;
          border: 1px solid #e9e9e9;
          width: 100%;
          margin-bottom: 24px;
      }
      .api table th{
          background: #f7f7f7;
          white-space: nowrap;
          color: #5c6b77;
          font-weight: 600;
      }
      .api table td, .api table th{
          border: 1px solid #e9e9e9;
          padding: 8px 16px;
          text-align: left;
      }
7570318b   梁灏   fixed Tooltip pla... 
30
 
  </style>
40f8606f   梁灏   add Notice component 
31
 
  <template>
7570318b   梁灏   fixed Tooltip pla... 
32
 
      <div class="tooltip_out">
9b784016   梁灏   update Poptip styles 
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
 
          <Poptip placement="right" width="300">
              <Button type="ghost">click 激活</Button>
              <div class="api" slot="content">
                  <table>
                      <thead>
                      <tr>
                          <th>属性</th>
                          <th>说明</th>
                          <th>类型</th>
                          <th>默认值</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td>content</td>
                          <td>显示的内容</td>
                          <td>String | Number</td>
                          <td>空</td>
                      </tr>
                      <tr>
                          <td>placement</td>
                          <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
                          <td>String</td>
                          <td>bottom</td>
                      </tr>
                      <tr>
                          <td>disabled</td>
                          <td>是否禁用提示框</td>
                          <td>Boolean</td>
                          <td>false</td>
                      </tr>
                      <tr>
                          <td>delay</td>
                          <td>延迟显示，单位毫秒</td>
                          <td>Number</td>
                          <td>0</td>
                      </tr>
                      </tbody>
                  </table>
              </div>
          </Poptip>
9699c270   梁灏   add Poptip component 
74
75
76
77
78
79
 
          <!--<Poptip title="标题" content="内容">-->
              <!--<Button>click 触发</Button>-->
          <!--</Poptip>-->
          <!--<Poptip title="标题" content="内容" trigger="hover">-->
              <!--<Button>hover 触发</Button>-->
          <!--</Poptip>-->
88bb7c92   梁灏   fix bug of Poptip 
80
81
 
          <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
              <a><strong>Delete</strong></a>
9699c270   梁灏   add Poptip component 
82
83
 
          </Poptip>
          <!--<Poptip title="标题" content="内容" trigger="focus">-->
88bb7c92   梁灏   fix bug of Poptip 
84
85
86
 
              <!--<input type="text">-->
          <!--</Poptip>-->
          <!--<Poptip title="标题" content="内容" trigger="focus">-->
9699c270   梁灏   add Poptip component 
87
88
 
              <!--<Button>focus 触发</Button>-->
          <!--</Poptip>-->
88bb7c92   梁灏   fix bug of Poptip 
89
90
91
92
93
94
95
96
97
 
          <!--<Tooltip content="这里是提示文字">-->
              <!--当鼠标经过这段文字时，会显示一个气泡框-->
          <!--</Tooltip>-->
          <Poptip>
              <a>click 激活</a>
              <div slot="content">
                  <a>关闭提示框</a>
              </div>
          </Poptip>
bf962a69   梁灏   remove Row css - ... 
98
 
      </div>
40f8606f   梁灏   add Notice component 
99
100
 
  </template>
  <script>
9699c270   梁灏   add Poptip component 
101
 
      import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
40f8606f   梁灏   add Notice component 
102
103
 
  
      export default {
9699c270   梁灏   add Poptip component 
104
 
          components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message },
40f8606f   梁灏   add Notice component 
105
106
107
108
109
 
          props: {
          
          },
          data () {
              return {
dce3e753   梁灏   add Tooltip compo... 
110
40f8606f   梁灏   add Notice component 
111
112
113
114
115
116
 
              }
          },
          computed: {
          
          },
          methods: {
9699c270   梁灏   add Poptip component 
117
118
119
120
121
122
 
              ok () {
                  Message.info('ok');
              },
              cancel () {
                  Message.info('cancel');
              }
40f8606f   梁灏   add Notice component 
123
124
125
 
          }
      }
  </script>