Skip to content

Popover增加controlled属性 #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 26, 2021
Merged

Popover增加controlled属性 #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/devui-vue/devui/popover/__tests__/popover.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {shallowMount } from '@vue/test-utils';
import { shallowMount } from '@vue/test-utils';
import DPopover from '../src/popover'
describe('DPopover', () => {
it('visible', () => {
Expand Down Expand Up @@ -34,7 +34,11 @@ describe('DPopover', () => {
})

it('trigger click', async () => {
const wrapper = shallowMount(DPopover)
const wrapper = shallowMount(DPopover, {
props: {
controlled: true
}
})
const isVisible = () => expect(wrapper.classes().includes('devui-popover-isVisible'))
isVisible().toBeFalsy()
await wrapper.find('.devui-popover-reference').trigger('click')
Expand Down
19 changes: 14 additions & 5 deletions packages/devui-vue/devui/popover/src/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ export default defineComponent({
default: 1060
},

controlled: {
type: Boolean,
default: false
},

popType: {
type: String as () => popType,
default: 'default'
Expand Down Expand Up @@ -84,7 +89,7 @@ export default defineComponent({
const {
position, content, zIndex, trigger, popType,
popoverStyle, mouseEnterDelay, mouseLeaveDelay,
showAnimation, popMaxWidth
showAnimation, popMaxWidth, controlled
} = toRefs(props);
const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value }
const isClick = trigger.value === 'click'
Expand All @@ -96,15 +101,19 @@ export default defineComponent({
}
visible.value = true
}
const onClick = isClick ? event : null;
const onClick = isClick && controlled.value ? event : null;
const enter = debounce(() => { visible.value = true }, mouseEnterDelay.value)
const leave = debounce(() => { visible.value = false }, mouseLeaveDelay.value)
const onMouseenter = isClick ? null : enter
const onMouseleave = isClick ? null : leave
const hiddenContext = () => { visible.value = false }
const onMouseenter = !isClick && controlled.value ? enter : null
const onMouseleave = !isClick && controlled.value ? leave : null
const hiddenContext = () => {
if (!controlled.value) return;
visible.value = false
}
popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`)

watch(() => props.visible, (newVal) => {
if (controlled.value) return;
visible.value = newVal;
})

Expand Down
125 changes: 81 additions & 44 deletions packages/devui-vue/docs/components/popover/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,34 @@
```vue
<template>
<div class="popover-demo-item" >
<d-popover visible>
<d-popover controlled>
<template #reference>
<d-button bsStyle="common">default</d-button>
<d-button btnStyle="common">default</d-button>
</template>
</d-popover>
<d-popover content="info!" popType="info" position="top" trigger="hover">
<d-popover content="info!" popType="info" position="top" trigger="hover" controlled>
<template #reference>
<d-button bsStyle="primary">info</d-button>
<d-button btnStyle="primary">info</d-button>
</template>
</d-popover>
<d-popover content="error!" popType="error" position="left" :zIndex="9999">
<d-popover content="error!" popType="error" controlled position="left" :zIndex="9999">
<template #reference>
<d-button bsStyle="danger">error</d-button>
<d-button btnStyle="danger">error</d-button>
</template>
</d-popover>
<d-popover content="success!" popType="success" position="right">
<d-popover content="success!" popType="success" controlled position="right">
<template #reference>
<d-button bsStyle="success">success</d-button>
<d-button btnStyle="success">success</d-button>
</template>
</d-popover>
<d-popover content="warning!" popType="warning" >
<d-popover content="warning!" popType="warning" controlled>
<template #reference>
<d-button bsStyle="warning">warning</d-button>
<d-button btnStyle="warning">warning</d-button>
</template>
</d-popover>
<d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100">
<d-popover content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
<template #reference>
<d-button bsStyle="common">no-animation</d-button>
<d-button btnStyle="common">no-animation</d-button>
</template>
</d-popover>
</div>
Expand All @@ -58,14 +58,14 @@
```vue
<template>
<div class="popover-demo-item">
<d-popover content="自定义内容" >
<d-popover content="自定义内容" controlled>
<template #reference>
<d-button bsStyle="primary"> click me!</d-button>
<d-button btnStyle="primary"> click me!</d-button>
</template>
</d-popover>
<d-popover content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}">
<d-popover content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}" controlled>
<template #reference>
<d-button bsStyle="primary"> hover me!</d-button>
<d-button btnStyle="primary"> hover me!</d-button>
</template>
</d-popover>
</div>
Expand All @@ -88,113 +88,113 @@
```vue
<template>
<div class="item">
<d-popover position="left" >
<d-popover position="left" controlled>
<template #content>
<div>left</div>
</template>
<template #reference>
<d-button bsStyle="common">left</d-button>
<d-button btnStyle="common">left</d-button>
</template>
</d-popover>
<d-popover position="left-top" >
<d-popover position="left-top" controlled>
<template #content>
<div >left-top</div>
<div>left-top</div>
</template>
<template #reference>
<d-button bsStyle="common">left-top</d-button>
<d-button btnStyle="common">left-top</d-button>
</template>
</d-popover>
<d-popover position="left-bottom" >
<d-popover position="left-bottom" controlled >
<template #content>
<div>left-bottom</div>
<div>left-bottom</div>
</template>
<template #reference>
<d-button bsStyle="common">left-bottom</d-button>
<d-button btnStyle="common">left-bottom</d-button>
</template>
</d-popover>
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="top" >
<d-popover position="top" controlled>
<template #content>
<span >top</span>
</template>
<template #reference>
<d-button bsStyle="common">top</d-button>
<d-button btnStyle="common">top</d-button>
</template>
</d-popover>
<d-popover position="top-left" >
<d-popover position="top-left" controlled>
<template #content>
<span >top-left</span>
</template>
<template #reference>
<d-button bsStyle="common">top-left</d-button>
<d-button btnStyle="common">top-left</d-button>
</template>
</d-popover>
<d-popover position="top-right" >
<d-popover position="top-right" controlled>
<template #content>
<span >top-right</span>
</template>
<template #reference>
<d-button bsStyle="common">top-right</d-button>
<d-button btnStyle="common">top-right</d-button>
</template>
</d-popover>
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="right" >
<d-popover position="right" controlled>
<template #content>
<div >right</div>
</template>
<template #reference>
<d-button bsStyle="common">right</d-button>
<d-button btnStyle="common">right</d-button>
</template>
</d-popover>
<d-popover position="right-top" >
<d-popover position="right-top" controlled>
<template #content>
<div >right-top</div>
<div >right-top</div>
</template>
<template #reference>
<d-button bsStyle="common">right-top</d-button>
<d-button btnStyle="common">right-top</d-button>
</template>
</d-popover>
<d-popover position="right-bottom" >
<d-popover position="right-bottom" controlled>
<template #content>
<div >right-bottom</div>
<div >right-bottom</div>
</template>
<template #reference>
<d-button bsStyle="common">right-bottom</d-button>
<d-button btnStyle="common">right-bottom</d-button>
</template>
</d-popover>
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="bottom" >
<d-popover position="bottom" controlled>
<template #content>
<div >bottom</div>
</template>
<template #reference>
<d-button bsStyle="common">bottom</d-button>
<d-button btnStyle="common">bottom</d-button>
</template>
</d-popover>
<d-popover position="bottom-left" >
<d-popover position="bottom-left" controlled>
<template #content>
<div >bottom-left</div>
</template>
<template #reference>
<d-button bsStyle="common">bottom-left</d-button>
<d-button btnStyle="common">bottom-left</d-button>
</template>
</d-popover>
<d-popover position="bottom-right" >
<d-popover position="bottom-right" controlled>
<template #content>
<div >bottom-right</div>
</template>
<template #reference>
<d-button bsStyle="common">bottom-right</d-button>
<d-button btnStyle="common">bottom-right</d-button>
</template>
</d-popover>
</div>
Expand All @@ -208,6 +208,42 @@

:::


### 手动触发
通过visible控制弹框显示实现表单验证，使用visible控制必须令controlled参数为默认值false。

:::demo
```vue
<template>
<d-popover position="top" :visible="visible">
<template #content>
<div > 手动触发 </div>
</template>
<template #reference>
<d-button btnStyle="primary" @click="onClick">手动触发</d-button>
</template>
</d-popover>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup(){
const visible=ref(false);
const onClick = ()=>{
visible.value = !visible.value ;
}
return{
visible,
onClick
}
}
})
</script>
```
:::



### 延时触发
仅需要在 trigger 为 hover 的时候，鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是150毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，Popover组件才会隐藏，默认值是100毫秒。

Expand All @@ -216,21 +252,21 @@
```vue
<template>
<div class="item">
<d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500">
<d-popover position="bottom-right" trigger="hover" :mouseEnterDelay ="500" controlled>
<template #content>
<div > Mouse enter 500ms later. </div>
show Me
</template>
<template #reference>
<d-button bsStyle="primary">MouseEnter delay 500ms</d-button>
<d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
</template>
</d-popover>
<d-popover position="bottom-right" trigger="hover" :mouseLeaveDelay="2000">
<d-popover position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
<template #content>
<div> Mouse leave 2000ms later. </div>
</template>
<template #reference>
<d-button bsStyle="common"> MouseLeave delay 2000ms</d-button>
<d-button btnStyle="common"> MouseLeave delay 2000ms</d-button>
</template>
</d-popover>
</div>
Expand All @@ -252,6 +288,7 @@
| content | `string` | defalut |可选，弹出框的显示内容或 | [自定义内容](#自定义内容) |
| visible | `boolean` | false | 可选，弹框的初始化弹出状态 | [基本用法](#基本用法) |
| trigger | `string` | click | 可选，弹框触发方式 | [基本用法](#基本用法) |
| controlled | `boolean` | false | 可选 是否通过`trigger`方式触发弹框 | [基本用法](#基本用法) |
| popType | `string` | default | 可选，弹出框类型，样式不同 | [基本用法](#基本用法) |
| zIndex | `number` | 1060 | 可选，z-index值用于手动控制层高 | [基本用法](#基本用法) |
| positionType | `string` | bottom | 可选，控制弹框出现 的方向 | [弹出位置](#弹出位置) |
Expand Down
Loading