|
10 | 10 | ```vue
|
11 | 11 | <template>
|
12 | 12 | <div class="popover-demo-item" >
|
13 |
| - <d-popover visible> |
| 13 | + <d-popover controlled> |
14 | 14 | <template #reference>
|
15 |
| - <d-button bsStyle="common">default</d-button> |
| 15 | + <d-button btnStyle="common">default</d-button> |
16 | 16 | </template>
|
17 | 17 | </d-popover>
|
18 |
| - <d-popover content="info!" popType="info" position="top" trigger="hover"> |
| 18 | + <d-popover content="info!" popType="info" position="top" trigger="hover" controlled> |
19 | 19 | <template #reference>
|
20 |
| - <d-button bsStyle="primary">info</d-button> |
| 20 | + <d-button btnStyle="primary">info</d-button> |
21 | 21 | </template>
|
22 | 22 | </d-popover>
|
23 |
| - <d-popover content="error!" popType="error" position="left" :zIndex="9999"> |
| 23 | + <d-popover content="error!" popType="error" controlled position="left" :zIndex="9999"> |
24 | 24 | <template #reference>
|
25 |
| - <d-button bsStyle="danger">error</d-button> |
| 25 | + <d-button btnStyle="danger">error</d-button> |
26 | 26 | </template>
|
27 | 27 | </d-popover>
|
28 |
| - <d-popover content="success!" popType="success" position="right"> |
| 28 | + <d-popover content="success!" popType="success" controlled position="right"> |
29 | 29 | <template #reference>
|
30 |
| - <d-button bsStyle="success">success</d-button> |
| 30 | + <d-button btnStyle="success">success</d-button> |
31 | 31 | </template>
|
32 | 32 | </d-popover>
|
33 |
| - <d-popover content="warning!" popType="warning" > |
| 33 | + <d-popover content="warning!" popType="warning" controlled> |
34 | 34 | <template #reference>
|
35 |
| - <d-button bsStyle="warning">warning</d-button> |
| 35 | + <d-button btnStyle="warning">warning</d-button> |
36 | 36 | </template>
|
37 | 37 | </d-popover>
|
38 |
| - <d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100"> |
| 38 | + <d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled> |
39 | 39 | <template #reference>
|
40 |
| - <d-button bsStyle="common">no-animation</d-button> |
| 40 | + <d-button btnStyle="common">no-animation</d-button> |
41 | 41 | </template>
|
42 | 42 | </d-popover>
|
43 | 43 | </div>
|
|
58 | 58 | ```vue
|
59 | 59 | <template>
|
60 | 60 | <div class="popover-demo-item">
|
61 |
| - <d-popover content="自定义内容" > |
| 61 | + <d-popover content="自定义内容" controlled> |
62 | 62 | <template #reference>
|
63 |
| - <d-button bsStyle="primary"> click me!</d-button> |
| 63 | + <d-button btnStyle="primary"> click me!</d-button> |
64 | 64 | </template>
|
65 | 65 | </d-popover>
|
66 |
| - <d-popover content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}"> |
| 66 | + <d-popover content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}" controlled> |
67 | 67 | <template #reference>
|
68 |
| - <d-button bsStyle="primary"> hover me!</d-button> |
| 68 | + <d-button btnStyle="primary"> hover me!</d-button> |
69 | 69 | </template>
|
70 | 70 | </d-popover>
|
71 | 71 | </div>
|
|
88 | 88 | ```vue
|
89 | 89 | <template>
|
90 | 90 | <div class="item">
|
91 |
| - <d-popover position="left" > |
| 91 | + <d-popover position="left" controlled> |
92 | 92 | <template #content>
|
93 | 93 | <div>left</div>
|
94 | 94 | </template>
|
95 | 95 | <template #reference>
|
96 |
| - <d-button bsStyle="common">left</d-button> |
| 96 | + <d-button btnStyle="common">left</d-button> |
97 | 97 | </template>
|
98 | 98 | </d-popover>
|
99 |
| - <d-popover position="left-top" > |
| 99 | + <d-popover position="left-top" controlled> |
100 | 100 | <template #content>
|
101 | 101 | <div >left-top</div>
|
102 | 102 | <div>left-top</div>
|
103 | 103 | </template>
|
104 | 104 | <template #reference>
|
105 |
| - <d-button bsStyle="common">left-top</d-button> |
| 105 | + <d-button btnStyle="common">left-top</d-button> |
106 | 106 | </template>
|
107 | 107 | </d-popover>
|
108 |
| - <d-popover position="left-bottom" > |
| 108 | + <d-popover position="left-bottom" controlled > |
109 | 109 | <template #content>
|
110 | 110 | <div>left-bottom</div>
|
111 | 111 | <div>left-bottom</div>
|
112 | 112 | </template>
|
113 | 113 | <template #reference>
|
114 |
| - <d-button bsStyle="common">left-bottom</d-button> |
| 114 | + <d-button btnStyle="common">left-bottom</d-button> |
115 | 115 | </template>
|
116 | 116 | </d-popover>
|
117 | 117 | </div>
|
118 | 118 |
|
119 | 119 | <div style="margin-top:10px;" class="item">
|
120 |
| - <d-popover position="top" > |
| 120 | + <d-popover position="top" controlled> |
121 | 121 | <template #content>
|
122 | 122 | <span >top</span>
|
123 | 123 | </template>
|
124 | 124 | <template #reference>
|
125 |
| - <d-button bsStyle="common">top</d-button> |
| 125 | + <d-button btnStyle="common">top</d-button> |
126 | 126 | </template>
|
127 | 127 | </d-popover>
|
128 |
| - <d-popover position="top-left" > |
| 128 | + <d-popover position="top-left" controlled> |
129 | 129 | <template #content>
|
130 | 130 | <span >top-left</span>
|
131 | 131 | </template>
|
132 | 132 | <template #reference>
|
133 |
| - <d-button bsStyle="common">top-left</d-button> |
| 133 | + <d-button btnStyle="common">top-left</d-button> |
134 | 134 | </template>
|
135 | 135 | </d-popover>
|
136 |
| - <d-popover position="top-right" > |
| 136 | + <d-popover position="top-right" controlled> |
137 | 137 | <template #content>
|
138 | 138 | <span >top-right</span>
|
139 | 139 | </template>
|
140 | 140 | <template #reference>
|
141 |
| - <d-button bsStyle="common">top-right</d-button> |
| 141 | + <d-button btnStyle="common">top-right</d-button> |
142 | 142 | </template>
|
143 | 143 | </d-popover>
|
144 | 144 | </div>
|
145 | 145 |
|
146 | 146 | <div style="margin-top:10px;" class="item">
|
147 |
| - <d-popover position="right" > |
| 147 | + <d-popover position="right" controlled> |
148 | 148 | <template #content>
|
149 | 149 | <div >right</div>
|
150 | 150 | </template>
|
151 | 151 | <template #reference>
|
152 |
| - <d-button bsStyle="common">right</d-button> |
| 152 | + <d-button btnStyle="common">right</d-button> |
153 | 153 | </template>
|
154 | 154 | </d-popover>
|
155 |
| - <d-popover position="right-top" > |
| 155 | + <d-popover position="right-top" controlled> |
156 | 156 | <template #content>
|
157 | 157 | <div >right-top</div>
|
158 | 158 | <div >right-top</div>
|
159 | 159 | </template>
|
160 | 160 | <template #reference>
|
161 |
| - <d-button bsStyle="common">right-top</d-button> |
| 161 | + <d-button btnStyle="common">right-top</d-button> |
162 | 162 | </template>
|
163 | 163 | </d-popover>
|
164 |
| - <d-popover position="right-bottom" > |
| 164 | + <d-popover position="right-bottom" controlled> |
165 | 165 | <template #content>
|
166 | 166 | <div >right-bottom</div>
|
167 | 167 | <div >right-bottom</div>
|
168 | 168 | </template>
|
169 | 169 | <template #reference>
|
170 |
| - <d-button bsStyle="common">right-bottom</d-button> |
| 170 | + <d-button btnStyle="common">right-bottom</d-button> |
171 | 171 | </template>
|
172 | 172 | </d-popover>
|
173 | 173 | </div>
|
174 | 174 |
|
175 | 175 | <div style="margin-top:10px;" class="item">
|
176 |
| - <d-popover position="bottom" > |
| 176 | + <d-popover position="bottom" controlled> |
177 | 177 | <template #content>
|
178 | 178 | <div >bottom</div>
|
179 | 179 | </template>
|
180 | 180 | <template #reference>
|
181 |
| - <d-button bsStyle="common">bottom</d-button> |
| 181 | + <d-button btnStyle="common">bottom</d-button> |
182 | 182 | </template>
|
183 | 183 | </d-popover>
|
184 |
| - <d-popover position="bottom-left" > |
| 184 | + <d-popover position="bottom-left" controlled> |
185 | 185 | <template #content>
|
186 | 186 | <div >bottom-left</div>
|
187 | 187 | </template>
|
188 | 188 | <template #reference>
|
189 |
| - <d-button bsStyle="common">bottom-left</d-button> |
| 189 | + <d-button btnStyle="common">bottom-left</d-button> |
190 | 190 | </template>
|
191 | 191 | </d-popover>
|
192 |
| - <d-popover position="bottom-right" > |
| 192 | + <d-popover position="bottom-right" controlled> |
193 | 193 | <template #content>
|
194 | 194 | <div >bottom-right</div>
|
195 | 195 | </template>
|
196 | 196 | <template #reference>
|
197 |
| - <d-button bsStyle="common">bottom-right</d-button> |
| 197 | + <d-button btnStyle="common">bottom-right</d-button> |
198 | 198 | </template>
|
199 | 199 | </d-popover>
|
200 | 200 | </div>
|
|
208 | 208 |
|
209 | 209 | :::
|
210 | 210 |
|
| 211 | + |
| 212 | +### 手动触发 |
| 213 | +通过visible控制弹框显示实现表单验证,使用visible控制必须令controlled参数为默认值false。 |
| 214 | + |
| 215 | +:::demo |
| 216 | +```vue |
| 217 | +<template> |
| 218 | + <d-popover position="top" :visible="visible"> |
| 219 | + <template #content> |
| 220 | + <div > 手动触发 </div> |
| 221 | + </template> |
| 222 | + <template #reference> |
| 223 | + <d-button btnStyle="primary" @click="onClick">手动触发</d-button> |
| 224 | + </template> |
| 225 | + </d-popover> |
| 226 | +</template> |
| 227 | +<script> |
| 228 | +import { defineComponent, ref } from 'vue' |
| 229 | +export default defineComponent({ |
| 230 | + setup(){ |
| 231 | + const visible=ref(false); |
| 232 | + const onClick = ()=>{ |
| 233 | + visible.value = !visible.value ; |
| 234 | + } |
| 235 | + return{ |
| 236 | + visible, |
| 237 | + onClick |
| 238 | + } |
| 239 | + } |
| 240 | +}) |
| 241 | +</script> |
| 242 | +``` |
| 243 | +::: |
| 244 | + |
| 245 | + |
| 246 | + |
211 | 247 | ### 延时触发
|
212 | 248 | 仅需要在 trigger 为 hover 的时候,鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发,以防止用户无意划过导致的闪现,默认值是150毫秒;鼠标移出之后,再经过[mouseLeaveDelay]毫秒后,Popover组件才会隐藏,默认值是100毫秒。
|
213 | 249 |
|
|
216 | 252 | ```vue
|
217 | 253 | <template>
|
218 | 254 | <div class="item">
|
219 |
| - <d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500"> |
| 255 | + <d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500" controlled> |
220 | 256 | <template #content>
|
221 | 257 | <div > Mouse enter 500ms later. </div>
|
222 | 258 | show Me
|
223 | 259 | </template>
|
224 | 260 | <template #reference>
|
225 |
| - <d-button bsStyle="primary">MouseEnter delay 500ms</d-button> |
| 261 | + <d-button btnStyle="primary">MouseEnter delay 500ms</d-button> |
226 | 262 | </template>
|
227 | 263 | </d-popover>
|
228 |
| - <d-popover position="bottom-right" trigger="hover" :mouseLeaveDelay="2000"> |
| 264 | + <d-popover position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000"> |
229 | 265 | <template #content>
|
230 | 266 | <div> Mouse leave 2000ms later. </div>
|
231 | 267 | </template>
|
232 | 268 | <template #reference>
|
233 |
| - <d-button bsStyle="common"> MouseLeave delay 2000ms</d-button> |
| 269 | + <d-button btnStyle="common"> MouseLeave delay 2000ms</d-button> |
234 | 270 | </template>
|
235 | 271 | </d-popover>
|
236 | 272 | </div>
|
|
252 | 288 | | content | `string` | defalut |可选,弹出框的显示内容或 | [自定义内容](#自定义内容) |
|
253 | 289 | | visible | `boolean` | false | 可选,弹框的初始化弹出状态 | [基本用法](#基本用法) |
|
254 | 290 | | trigger | `string` | click | 可选,弹框触发方式 | [基本用法](#基本用法) |
|
| 291 | +| controlled | `boolean` | false | 可选 是否通过`trigger`方式触发弹框 | [基本用法](#基本用法) | |
255 | 292 | | popType | `string` | default | 可选,弹出框类型,样式不同 | [基本用法](#基本用法) |
|
256 | 293 | | zIndex | `number` | 1060 | 可选,z-index值用于手动控制层高 | [基本用法](#基本用法) |
|
257 | 294 | | positionType | `string` | bottom | 可选,控制弹框出现 的方向 | [弹出位置](#弹出位置) |
|
|
0 commit comments