Skip to content

Commit 540a8a5

Browse files
authored
feat(popover): 增加controlled属性(#97) (#99)
1 parent dd839a4 commit 540a8a5

File tree

4 files changed

+164
-79
lines changed

4 files changed

+164
-79
lines changed

packages/devui-vue/devui/popover/__tests__/popover.spec.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {shallowMount } from '@vue/test-utils';
1+
import { shallowMount } from '@vue/test-utils';
22
import DPopover from '../src/popover'
33
describe('DPopover', () => {
44
it('visible', () => {
@@ -34,7 +34,11 @@ describe('DPopover', () => {
3434
})
3535

3636
it('trigger click', async () => {
37-
const wrapper = shallowMount(DPopover)
37+
const wrapper = shallowMount(DPopover, {
38+
props: {
39+
controlled: true
40+
}
41+
})
3842
const isVisible = () => expect(wrapper.classes().includes('devui-popover-isVisible'))
3943
isVisible().toBeFalsy()
4044
await wrapper.find('.devui-popover-reference').trigger('click')

packages/devui-vue/devui/popover/src/popover.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ export default defineComponent({
4747
default: 1060
4848
},
4949

50+
controlled: {
51+
type: Boolean,
52+
default: false
53+
},
54+
5055
popType: {
5156
type: String as () => popType,
5257
default: 'default'
@@ -84,7 +89,7 @@ export default defineComponent({
8489
const {
8590
position, content, zIndex, trigger, popType,
8691
popoverStyle, mouseEnterDelay, mouseLeaveDelay,
87-
showAnimation, popMaxWidth
92+
showAnimation, popMaxWidth, controlled
8893
} = toRefs(props);
8994
const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value }
9095
const isClick = trigger.value === 'click'
@@ -96,15 +101,19 @@ export default defineComponent({
96101
}
97102
visible.value = true
98103
}
99-
const onClick = isClick ? event : null;
104+
const onClick = isClick && controlled.value ? event : null;
100105
const enter = debounce(() => { visible.value = true }, mouseEnterDelay.value)
101106
const leave = debounce(() => { visible.value = false }, mouseLeaveDelay.value)
102-
const onMouseenter = isClick ? null : enter
103-
const onMouseleave = isClick ? null : leave
104-
const hiddenContext = () => { visible.value = false }
107+
const onMouseenter = !isClick && controlled.value ? enter : null
108+
const onMouseleave = !isClick && controlled.value ? leave : null
109+
const hiddenContext = () => {
110+
if (!controlled.value) return;
111+
visible.value = false
112+
}
105113
popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`)
106114

107115
watch(() => props.visible, (newVal) => {
116+
if (controlled.value) return;
108117
visible.value = newVal;
109118
})
110119

packages/devui-vue/docs/components/popover/index.md

Lines changed: 81 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,34 @@
1010
```vue
1111
<template>
1212
<div class="popover-demo-item" >
13-
<d-popover visible>
13+
<d-popover controlled>
1414
<template #reference>
15-
<d-button bsStyle="common">default</d-button>
15+
<d-button btnStyle="common">default</d-button>
1616
</template>
1717
</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>
1919
<template #reference>
20-
<d-button bsStyle="primary">info</d-button>
20+
<d-button btnStyle="primary">info</d-button>
2121
</template>
2222
</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">
2424
<template #reference>
25-
<d-button bsStyle="danger">error</d-button>
25+
<d-button btnStyle="danger">error</d-button>
2626
</template>
2727
</d-popover>
28-
<d-popover content="success!" popType="success" position="right">
28+
<d-popover content="success!" popType="success" controlled position="right">
2929
<template #reference>
30-
<d-button bsStyle="success">success</d-button>
30+
<d-button btnStyle="success">success</d-button>
3131
</template>
3232
</d-popover>
33-
<d-popover content="warning!" popType="warning" >
33+
<d-popover content="warning!" popType="warning" controlled>
3434
<template #reference>
35-
<d-button bsStyle="warning">warning</d-button>
35+
<d-button btnStyle="warning">warning</d-button>
3636
</template>
3737
</d-popover>
38-
<d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100">
38+
<d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
3939
<template #reference>
40-
<d-button bsStyle="common">no-animation</d-button>
40+
<d-button btnStyle="common">no-animation</d-button>
4141
</template>
4242
</d-popover>
4343
</div>
@@ -58,14 +58,14 @@
5858
```vue
5959
<template>
6060
<div class="popover-demo-item">
61-
<d-popover content="自定义内容" >
61+
<d-popover content="自定义内容" controlled>
6262
<template #reference>
63-
<d-button bsStyle="primary"> click me!</d-button>
63+
<d-button btnStyle="primary"> click me!</d-button>
6464
</template>
6565
</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>
6767
<template #reference>
68-
<d-button bsStyle="primary"> hover me!</d-button>
68+
<d-button btnStyle="primary"> hover me!</d-button>
6969
</template>
7070
</d-popover>
7171
</div>
@@ -88,113 +88,113 @@
8888
```vue
8989
<template>
9090
<div class="item">
91-
<d-popover position="left" >
91+
<d-popover position="left" controlled>
9292
<template #content>
9393
<div>left</div>
9494
</template>
9595
<template #reference>
96-
<d-button bsStyle="common">left</d-button>
96+
<d-button btnStyle="common">left</d-button>
9797
</template>
9898
</d-popover>
99-
<d-popover position="left-top" >
99+
<d-popover position="left-top" controlled>
100100
<template #content>
101101
<div >left-top</div>
102102
<div>left-top</div>
103103
</template>
104104
<template #reference>
105-
<d-button bsStyle="common">left-top</d-button>
105+
<d-button btnStyle="common">left-top</d-button>
106106
</template>
107107
</d-popover>
108-
<d-popover position="left-bottom" >
108+
<d-popover position="left-bottom" controlled >
109109
<template #content>
110110
<div>left-bottom</div>
111111
<div>left-bottom</div>
112112
</template>
113113
<template #reference>
114-
<d-button bsStyle="common">left-bottom</d-button>
114+
<d-button btnStyle="common">left-bottom</d-button>
115115
</template>
116116
</d-popover>
117117
</div>
118118
119119
<div style="margin-top:10px;" class="item">
120-
<d-popover position="top" >
120+
<d-popover position="top" controlled>
121121
<template #content>
122122
<span >top</span>
123123
</template>
124124
<template #reference>
125-
<d-button bsStyle="common">top</d-button>
125+
<d-button btnStyle="common">top</d-button>
126126
</template>
127127
</d-popover>
128-
<d-popover position="top-left" >
128+
<d-popover position="top-left" controlled>
129129
<template #content>
130130
<span >top-left</span>
131131
</template>
132132
<template #reference>
133-
<d-button bsStyle="common">top-left</d-button>
133+
<d-button btnStyle="common">top-left</d-button>
134134
</template>
135135
</d-popover>
136-
<d-popover position="top-right" >
136+
<d-popover position="top-right" controlled>
137137
<template #content>
138138
<span >top-right</span>
139139
</template>
140140
<template #reference>
141-
<d-button bsStyle="common">top-right</d-button>
141+
<d-button btnStyle="common">top-right</d-button>
142142
</template>
143143
</d-popover>
144144
</div>
145145
146146
<div style="margin-top:10px;" class="item">
147-
<d-popover position="right" >
147+
<d-popover position="right" controlled>
148148
<template #content>
149149
<div >right</div>
150150
</template>
151151
<template #reference>
152-
<d-button bsStyle="common">right</d-button>
152+
<d-button btnStyle="common">right</d-button>
153153
</template>
154154
</d-popover>
155-
<d-popover position="right-top" >
155+
<d-popover position="right-top" controlled>
156156
<template #content>
157157
<div >right-top</div>
158158
<div >right-top</div>
159159
</template>
160160
<template #reference>
161-
<d-button bsStyle="common">right-top</d-button>
161+
<d-button btnStyle="common">right-top</d-button>
162162
</template>
163163
</d-popover>
164-
<d-popover position="right-bottom" >
164+
<d-popover position="right-bottom" controlled>
165165
<template #content>
166166
<div >right-bottom</div>
167167
<div >right-bottom</div>
168168
</template>
169169
<template #reference>
170-
<d-button bsStyle="common">right-bottom</d-button>
170+
<d-button btnStyle="common">right-bottom</d-button>
171171
</template>
172172
</d-popover>
173173
</div>
174174
175175
<div style="margin-top:10px;" class="item">
176-
<d-popover position="bottom" >
176+
<d-popover position="bottom" controlled>
177177
<template #content>
178178
<div >bottom</div>
179179
</template>
180180
<template #reference>
181-
<d-button bsStyle="common">bottom</d-button>
181+
<d-button btnStyle="common">bottom</d-button>
182182
</template>
183183
</d-popover>
184-
<d-popover position="bottom-left" >
184+
<d-popover position="bottom-left" controlled>
185185
<template #content>
186186
<div >bottom-left</div>
187187
</template>
188188
<template #reference>
189-
<d-button bsStyle="common">bottom-left</d-button>
189+
<d-button btnStyle="common">bottom-left</d-button>
190190
</template>
191191
</d-popover>
192-
<d-popover position="bottom-right" >
192+
<d-popover position="bottom-right" controlled>
193193
<template #content>
194194
<div >bottom-right</div>
195195
</template>
196196
<template #reference>
197-
<d-button bsStyle="common">bottom-right</d-button>
197+
<d-button btnStyle="common">bottom-right</d-button>
198198
</template>
199199
</d-popover>
200200
</div>
@@ -208,6 +208,42 @@
208208

209209
:::
210210

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+
211247
### 延时触发
212248
仅需要在 trigger 为 hover 的时候,鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发,以防止用户无意划过导致的闪现,默认值是150毫秒;鼠标移出之后,再经过[mouseLeaveDelay]毫秒后,Popover组件才会隐藏,默认值是100毫秒。
213249

@@ -216,21 +252,21 @@
216252
```vue
217253
<template>
218254
<div class="item">
219-
<d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500">
255+
<d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500" controlled>
220256
<template #content>
221257
<div > Mouse enter 500ms later. </div>
222258
show Me
223259
</template>
224260
<template #reference>
225-
<d-button bsStyle="primary">MouseEnter delay 500ms</d-button>
261+
<d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
226262
</template>
227263
</d-popover>
228-
<d-popover position="bottom-right" trigger="hover" :mouseLeaveDelay="2000">
264+
<d-popover position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
229265
<template #content>
230266
<div> Mouse leave 2000ms later. </div>
231267
</template>
232268
<template #reference>
233-
<d-button bsStyle="common"> MouseLeave delay 2000ms</d-button>
269+
<d-button btnStyle="common"> MouseLeave delay 2000ms</d-button>
234270
</template>
235271
</d-popover>
236272
</div>
@@ -252,6 +288,7 @@
252288
| content | `string` | defalut |可选,弹出框的显示内容或 | [自定义内容](#自定义内容) |
253289
| visible | `boolean` | false | 可选,弹框的初始化弹出状态 | [基本用法](#基本用法) |
254290
| trigger | `string` | click | 可选,弹框触发方式 | [基本用法](#基本用法) |
291+
| controlled | `boolean` | false | 可选 是否通过`trigger`方式触发弹框 | [基本用法](#基本用法) |
255292
| popType | `string` | default | 可选,弹出框类型,样式不同 | [基本用法](#基本用法) |
256293
| zIndex | `number` | 1060 | 可选,z-index值用于手动控制层高 | [基本用法](#基本用法) |
257294
| positionType | `string` | bottom | 可选,控制弹框出现 的方向 | [弹出位置](#弹出位置) |

0 commit comments

Comments
 (0)