chenhaodong / mew-iview

Blame view

test/routers/notice.vue 4.19 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">
613f5243   梁灏   update Poptip 
33
34
35
36
37
38
39
 
          <Poptip>
              <a>click 激活</a>
              <div slot="title"><i>自定义标题</i></div>
              <div slot="content">
                  <a>关闭提示框</a>
              </div>
          </Poptip>
9b784016   梁灏   update Poptip styles 
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
 
          <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 
81
82
83
84
85
86
 
          <!--<Poptip title="标题" content="内容">-->
              <!--<Button>click 触发</Button>-->
          <!--</Poptip>-->
          <!--<Poptip title="标题" content="内容" trigger="hover">-->
              <!--<Button>hover 触发</Button>-->
          <!--</Poptip>-->
88bb7c92   梁灏   fix bug of Poptip 
87
88
 
          <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
              <a><strong>Delete</strong></a>
9699c270   梁灏   add Poptip component 
89
90
 
          </Poptip>
          <!--<Poptip title="标题" content="内容" trigger="focus">-->
88bb7c92   梁灏   fix bug of Poptip 
91
92
93
 
              <!--<input type="text">-->
          <!--</Poptip>-->
          <!--<Poptip title="标题" content="内容" trigger="focus">-->
9699c270   梁灏   add Poptip component 
94
95
 
              <!--<Button>focus 触发</Button>-->
          <!--</Poptip>-->
88bb7c92   梁灏   fix bug of Poptip 
96
97
98
99
100
101
102
103
104
 
          <!--<Tooltip content="这里是提示文字">-->
              <!--当鼠标经过这段文字时，会显示一个气泡框-->
          <!--</Tooltip>-->
          <Poptip>
              <a>click 激活</a>
              <div slot="content">
                  <a>关闭提示框</a>
              </div>
          </Poptip>
bf962a69   梁灏   remove Row css - ... 
105
 
      </div>
40f8606f   梁灏   add Notice component 
106
107
 
  </template>
  <script>
9699c270   梁灏   add Poptip component 
108
 
      import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
40f8606f   梁灏   add Notice component 
109
110
 
  
      export default {
9699c270   梁灏   add Poptip component 
111
 
          components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message },
40f8606f   梁灏   add Notice component 
112
113
114
115
116
 
          props: {
          
          },
          data () {
              return {
dce3e753   梁灏   add Tooltip compo... 
117
40f8606f   梁灏   add Notice component 
118
119
120
121
122
123
 
              }
          },
          computed: {
          
          },
          methods: {
9699c270   梁灏   add Poptip component 
124
125
126
127
128
129
 
              ok () {
                  Message.info('ok');
              },
              cancel () {
                  Message.info('cancel');
              }
40f8606f   梁灏   add Notice component 
130
131
132
 
          }
      }
  </script>