poptip.vue
5.54 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<style>
.tooltip_out{
padding: 150px;
}
body{
height: 1000px;
padding: 10px;
}
.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;
}
.tip{
width: 24px;
position: fixed;
top: 10px;
right: 10px;
}
.tip-inner{
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
background: #fff;
border: 1px solid #3399ff;
color: #3399ff;
border-radius: 50%;
cursor: pointer;
}
.tip-content{
width: 200px;
height: 100px;
white-space: normal;
}
</style>
<template>
<Tooltip content="这里是提示文字">
当鼠标经过这段文字时，会显示一个气泡框
</Tooltip>
<div class="tooltip_out">
<Poptip trigger="hover" title="提示标题" content="提示内容">
<i-button>hover 激活</i-button>
</Poptip>
<Poptip content="提示内容" title="tip">
<i-button>click 激活</i-button>
</Poptip>
<Poptip content="提示内容">
<div slot="title"><i>自定义标题</i></div>
<i-button>click 激活</i-button>
</Poptip>
<Tooltip class="tip" placement="left-start" trigger="hover">
<div class="tip-inner">
<Icon type="information"></Icon>
</div>
<div class="tip-content" slot="content">
<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>
</div>
</Tooltip>
<Poptip>
<a>click 激活</a>
<div slot="title"><i>自定义标题</i></div>
<div slot="content">
<a>关闭提示框</a>
</div>
</Poptip>
<Poptip placement="right" width="300">
<i-button type="ghost">click 激活</i-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>
<!--<Poptip title="标题" content="内容">-->
<!--<Button>click 触发</Button>-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容" trigger="hover">-->
<!--<Button>hover 触发</Button>-->
<!--</Poptip>-->
<Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
<a><strong>Delete</strong></a>
</Poptip>
<!--<Poptip title="标题" content="内容" trigger="focus">-->
<!--<input type="text">-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容" trigger="focus">-->
<!--<Button>focus 触发</Button>-->
<!--</Poptip>-->
<!--<Tooltip content="这里是提示文字">-->
<!--当鼠标经过这段文字时，会显示一个气泡框-->
<!--</Tooltip>-->
<Poptip>
<a>click 激活</a>
<div slot="content">
<a>关闭提示框</a>
</div>
</Poptip>
</div>
</template>
<script>
import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
export default {
components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
ok () {
Message.info('ok');
},
cancel () {
Message.info('cancel');
}
}
}
</script>