From 93dfc5a97c37449fd3824ea6e38da5c54adad645 Mon Sep 17 00:00:00 2001 From: CatsAndMice Date: Mon, 20 Sep 2021 21:27:21 +0800 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20popover=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=AD=E6=8A=BD=E7=A6=BB=E9=98=B2=E6=8A=96=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/popover/src/debounce.ts | 9 +++++++++ devui/popover/src/popover.tsx | 19 +++++-------------- package.json | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) create mode 100644 devui/popover/src/debounce.ts diff --git a/devui/popover/src/debounce.ts b/devui/popover/src/debounce.ts new file mode 100644 index 00000000..6c740987 --- /dev/null +++ b/devui/popover/src/debounce.ts @@ -0,0 +1,9 @@ +export default (wait: number, callBack) => { + let time = null + return () => { + time && clearTimeout(time); + time = setTimeout(() => { + callBack?.() + }, wait) + } +} \ No newline at end of file diff --git a/devui/popover/src/popover.tsx b/devui/popover/src/popover.tsx index 9fbd12ca..3ddff946 100644 --- a/devui/popover/src/popover.tsx +++ b/devui/popover/src/popover.tsx @@ -1,4 +1,5 @@ import { defineComponent, toRefs, ref, CSSProperties, reactive } from 'vue' +import debounce from './debounce' import clickoutsideDirective from '../../shared/devui-directive/clickoutside' import './popover.scss' @@ -61,8 +62,6 @@ export default defineComponent({ }, setup(props, ctx) { - let enter = null - let leave = null const visible = ref(props.visible); const { position, content, zIndex, trigger, popType, mouseEnterDelay, mouseLeaveDelay, showAnimation } = toRefs(props); const isClick = trigger.value === 'click' @@ -75,18 +74,10 @@ export default defineComponent({ visible.value = true } const onClick = isClick ? event : null; - const onMouseenter = isClick ? null : () => { - enter && clearTimeout(enter); - enter = setTimeout(() => { - visible.value = true - }, mouseEnterDelay.value) - } - const onMouseleave = isClick ? null : () => { - leave && clearTimeout(leave) - leave = setTimeout(() => { - visible.value = false - }, mouseLeaveDelay.value) - } + const enter = debounce(mouseEnterDelay.value, () => { visible.value = true }) + const leave = debounce(mouseLeaveDelay.value, () => { visible.value = false }) + const onMouseenter = isClick ? null : enter + const onMouseleave = isClick ? null : leave const hiddenContext = function () { visible.value = false } diff --git a/package.json b/package.json index cfe0a4f4..51096e2d 100644 --- a/package.json +++ b/package.json @@ -103,4 +103,4 @@ "{src,devui}/**/*.{js,ts,jsx,tsx,vue}": "eslint --fix", "{src,devui}/**/*.{scss,css}": "stylelint --fix" } -} +} \ No newline at end of file -- Gitee From 4c553ef44464fa7550c1605d792137708476a87e Mon Sep 17 00:00:00 2001 From: CatsAndMice Date: Mon, 20 Sep 2021 22:28:58 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=8E=BB=E9=99=A4=E4=BC=AA?= =?UTF-8?q?=E5=85=83=E7=B4=A0=EF=BC=8C=E4=BD=BF=E7=94=A8span=E7=BB=98?= =?UTF-8?q?=E5=88=B6=E4=B8=89=E8=A7=92=E5=BD=A2=20=E4=BD=BF=E7=94=A8span?= =?UTF-8?q?=E4=BB=A3=E6=9B=BF=E4=BC=AA=E5=85=83=E7=B4=A0=E6=96=B9=E4=BE=BF?= =?UTF-8?q?css=E5=B1=9E=E6=80=A7=E8=B5=8B=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/popover/src/popover.scss | 29 +++++++++++++++-------------- devui/popover/src/popover.tsx | 22 +++++++++++++++++++--- docs/components/popover/index.md | 11 +++++++++-- 3 files changed, 43 insertions(+), 19 deletions(-) diff --git a/devui/popover/src/popover.scss b/devui/popover/src/popover.scss index 60f8e1d3..43f2111f 100644 --- a/devui/popover/src/popover.scss +++ b/devui/popover/src/popover.scss @@ -15,7 +15,7 @@ position: relative; @include some-display; - &::after { + .after { content: ''; width: 12px; display: none; @@ -31,7 +31,7 @@ @include some-display; } - &::after { + .after { @include some-display; } } @@ -39,6 +39,7 @@ .devui-popover-content { position: absolute; display: none; + overflow: hidden; padding: 5px 14px; align-items: center; flex-wrap: wrap; @@ -71,7 +72,7 @@ @include some-animation; } - &::after { + .after { $devui-popover-animation-wait:0.1s; opacity: 0; @@ -112,7 +113,7 @@ transform: translate(-100%, -50%); } - &::after { + .after { @include left-postion--after; } } @@ -122,7 +123,7 @@ @include left-postion--content; } - &::after { + .after { @include left-postion--after; top: var(--devui-popover-offset); @@ -138,7 +139,7 @@ bottom: 0; } - &::after { + .after { @include left-postion--after; bottom: var(--devui-popover-offset); @@ -168,7 +169,7 @@ transform: translate(-50%, -100%); } - &::after { + .after { left: 50%; @include top-postion--after; } @@ -196,7 +197,7 @@ right: 0; } - &::after { + .after { @include top-postion--after; right: var(--devui-popover-offset); @@ -224,7 +225,7 @@ transform: translate(100%, -50%); } - &::after { + .after { @include right-postion--after; top: 50%; @@ -239,7 +240,7 @@ top: 0; } - &::after { + .after { @include right-postion--after; } } @@ -252,7 +253,7 @@ top: auto; } - &::after { + .after { @include right-postion--after; bottom: var(--devui-popover-offset); @@ -284,7 +285,7 @@ transform: translate(-50%, 100%); } - &::after { + .after { @include bottom-postion--after; left: 50%; @@ -298,7 +299,7 @@ @include bottom-postion--content; } - &::after { + .after { @include bottom-postion--after; } } @@ -311,7 +312,7 @@ right: 0; } - &::after { + .after { @include bottom-postion--after; left: auto; diff --git a/devui/popover/src/popover.tsx b/devui/popover/src/popover.tsx index 3ddff946..8b28d4c1 100644 --- a/devui/popover/src/popover.tsx +++ b/devui/popover/src/popover.tsx @@ -43,27 +43,41 @@ export default defineComponent({ type: Number as () => CSSProperties, default: 1060 }, + popType: { type: String as () => popType, default: 'default' }, + showAnimation: { type: Boolean, default: true }, + mouseEnterDelay: { type: Number, default: 150 }, + mouseLeaveDelay: { type: Number, default: 100 + }, + + popMaxWidth: { + type: Number, + default: undefined + }, + + popoverStyle: { + type: Object, + default: () => ({}) } }, setup(props, ctx) { const visible = ref(props.visible); - const { position, content, zIndex, trigger, popType, mouseEnterDelay, mouseLeaveDelay, showAnimation } = toRefs(props); + const { position, content, zIndex, trigger, popType, popoverStyle, mouseEnterDelay, mouseLeaveDelay, showAnimation, popMaxWidth } = toRefs(props); const isClick = trigger.value === 'click' const iconType = reactive(popTypeClass[popType.value]) const event = function () { @@ -82,12 +96,13 @@ export default defineComponent({ visible.value = false } - return () => { const { slots } = ctx; const style: CSSProperties = { - zIndex: zIndex.value + zIndex: zIndex.value, + ...popoverStyle.value } + popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`) return (
+
{slots.reference?.()}
diff --git a/docs/components/popover/index.md b/docs/components/popover/index.md index d6abd794..8cd1eb24 100644 --- a/docs/components/popover/index.md +++ b/docs/components/popover/index.md @@ -33,7 +33,7 @@ warning - + @@ -84,7 +84,12 @@
+ + +
@@ -381,6 +386,8 @@ | zIndex | `number` | 1060 | 可选，z-index值用于手动控制层高 | [基本用法](#基本用法) | | positionType | `string` | bottom | 可选，控制弹框出现 的方向 | [弹出位置](#弹出位置) | | showAnimation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) | +| popMaxWidth | `number` | - | 可选，限制弹出框最大宽度（`px`） | [基本用法](#基本用法) | | mouseEnterDelay | `number` | 150 | 可选，仅需要在 trigger 为 hover 的时候，设置鼠标移入后延时多少才显示 Popover，单位是 `ms` | [延时触发](#延时触发) | | mouseLeaveDelay | `number` | 100 | 可选，仅需要在 trigger 为 hover 的时候，设置鼠标移出后延时多少才隐藏 popover，单位是 `ms` | [延时触发](#延时触发) | +| popoverStyle | `{[klass:string]:any;}` | - | 可选，在需要改变弹出层样式时设置，箭头会应用同样的背景色。样式，参见[Angular版本—Popover]([DevUI](https://devui.design/components/zh-cn/popover/api)) | [自定义内容](#自定义内容) | -- Gitee From e0acac2ebf786e53019fb9b65fa1254e83088d56 Mon Sep 17 00:00:00 2001 From: CatsAndMice Date: Tue, 21 Sep 2021 12:05:38 +0800 Subject: [PATCH 3/6] =?UTF-8?q?test:=20Popover=E6=B7=BB=E5=8A=A0=E6=B5=8B?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/popover/__tests__/popover.spec.ts | 96 +++++++++++++++++++++++++ docs/components/popover/index.md | 13 +++- 2 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 devui/popover/__tests__/popover.spec.ts diff --git a/devui/popover/__tests__/popover.spec.ts b/devui/popover/__tests__/popover.spec.ts new file mode 100644 index 00000000..699d8922 --- /dev/null +++ b/devui/popover/__tests__/popover.spec.ts @@ -0,0 +1,96 @@ +import {shallowMount } from '@vue/test-utils'; +import DPopover from '../src/popover' +describe('DPopover', () => { + it('visible', () => { + const wrapper = shallowMount(DPopover, { + props: { + visible: true + } + }) + expect(wrapper.props().visible).toBeTruthy() + expect(wrapper.classes().includes('devui-popover-isVisible')).toBeTruthy() + }) + + it('position', () => { + const left = 'left' + const wrapper = shallowMount(DPopover, { + props: { + position: left + } + }) + expect(wrapper.props().position).toBe(left) + expect(wrapper.classes().includes(left)).toBeTruthy() + }) + + it('content', () => { + const content = '自定义内容' + const wrapper = shallowMount(DPopover, { + props: { + content + } + }) + expect(wrapper.props().content).toBe(content) + expect(wrapper.find('.devui-popover-content').text()).toBe(content) + }) + + it('trigger click', async () => { + const wrapper = shallowMount(DPopover) + const isVisible = () => expect(wrapper.classes().includes('devui-popover-isVisible')) + isVisible().toBeFalsy() + await wrapper.find('.devui-popover-reference').trigger('click') + isVisible().toBeTruthy(); + }) + + it('trigger mouse', async () => { + const wrapper = shallowMount(DPopover, { + props: { + trigger: 'hover' + } + }) + const isVisible = () => expect(wrapper.classes().includes('devui-popover-isVisible')) + isVisible().toBeFalsy() + wrapper.find('.devui-popover-reference').trigger('onMouseenter') + wrapper.vm.$nextTick(() => { + isVisible().toBeTruthy() + }) + }) + + it('zIndex', () => { + const zIndex = 1000 + const wrapper = shallowMount(DPopover, { + props: { + zIndex + } + }) + expect(wrapper.props().zIndex).toBe(zIndex); + }) + + it('popType', () => { + const wrapper = shallowMount(DPopover, { + props: { + popType: 'warning' + } + }) + expect(wrapper.find('.devui-popover-icon').attributes().name).toBe('warning-o') + }) + + it('showAnimation', () => { + const wrapper = shallowMount(DPopover, { + props: { + showAnimation: false, + } + }) + expect(wrapper.classes().includes('devui-popover-animation')).toBeFalsy() + }) + + it('popMaxWidth', () => { + const popMaxWidth = 30 + const wrapper = shallowMount(DPopover, { + props: { + popMaxWidth + } + }) + expect(wrapper.props().popMaxWidth).toBe(popMaxWidth) + }) + +}) \ No newline at end of file diff --git a/docs/components/popover/index.md b/docs/components/popover/index.md index 8cd1eb24..1514d084 100644 --- a/docs/components/popover/index.md +++ b/docs/components/popover/index.md @@ -375,7 +375,9 @@ ``` -### dPopover 参数 +### dPopover API + +#### Props | 参数 | 类型 | 默认值 | 描述 | 跳转Demo | | ---- | ---- | ---- | ---- | ---- | @@ -391,3 +393,12 @@ | mouseLeaveDelay | `number` | 100 | 可选，仅需要在 trigger 为 hover 的时候，设置鼠标移出后延时多少才隐藏 popover，单位是 `ms` | [延时触发](#延时触发) | | popoverStyle | `{[klass:string]:any;}` | - | 可选，在需要改变弹出层样式时设置，箭头会应用同样的背景色。样式，参见[Angular版本—Popover]([DevUI](https://devui.design/components/zh-cn/popover/api)) | [自定义内容](#自定义内容) | + + +#### Slot + +| 名称 | 说明 | +| --------- | --------------------------- | +| content | 自定义菜单内容 | +| reference | 触发 Popover 显示的元素内容 | + -- Gitee From ff6c9d54f5e234bddf216dca01e4275edcffcc97 Mon Sep 17 00:00:00 2001 From: CatsAndMice Date: Thu, 23 Sep 2021 13:34:31 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E9=98=B2=E6=8A=96?= =?UTF-8?q?=E5=BC=95=E7=94=A8lodash=E5=8F=8A=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/popover/src/debounce.ts | 9 -- devui/popover/src/popover.scss | 5 +- devui/popover/src/popover.tsx | 6 +- docs/components/popover/index.md | 244 +++++++------------------------ 4 files changed, 61 insertions(+), 203 deletions(-) delete mode 100644 devui/popover/src/debounce.ts diff --git a/devui/popover/src/debounce.ts b/devui/popover/src/debounce.ts deleted file mode 100644 index 6c740987..00000000 --- a/devui/popover/src/debounce.ts +++ /dev/null @@ -1,9 +0,0 @@ -export default (wait: number, callBack) => { - let time = null - return () => { - time && clearTimeout(time); - time = setTimeout(() => { - callBack?.() - }, wait) - } -} \ No newline at end of file diff --git a/devui/popover/src/popover.scss b/devui/popover/src/popover.scss index 43f2111f..3c6a1f10 100644 --- a/devui/popover/src/popover.scss +++ b/devui/popover/src/popover.scss @@ -22,7 +22,6 @@ height: 12px; transform: rotate(45deg); position: absolute; - z-index: 1060; background-color: $devui-feedback-overlay-bg; } @@ -73,7 +72,7 @@ } .after { - $devui-popover-animation-wait:0.1s; + $devui-popover-animation-wait:0.02s; opacity: 0; @include some-animation; @@ -180,7 +179,7 @@ @include top-postion--content; } - &::after { + .after { @include top-postion--after; left: var(--devui-popover-offset); diff --git a/devui/popover/src/popover.tsx b/devui/popover/src/popover.tsx index 8b28d4c1..12875f39 100644 --- a/devui/popover/src/popover.tsx +++ b/devui/popover/src/popover.tsx @@ -1,5 +1,5 @@ import { defineComponent, toRefs, ref, CSSProperties, reactive } from 'vue' -import debounce from './debounce' +import _ from 'lodash-es'; import clickoutsideDirective from '../../shared/devui-directive/clickoutside' import './popover.scss' @@ -88,8 +88,8 @@ export default defineComponent({ visible.value = true } const onClick = isClick ? event : null; - const enter = debounce(mouseEnterDelay.value, () => { visible.value = true }) - const leave = debounce(mouseLeaveDelay.value, () => { visible.value = false }) + 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 = function () { diff --git a/docs/components/popover/index.md b/docs/components/popover/index.md index 1514d084..5fff421e 100644 --- a/docs/components/popover/index.md +++ b/docs/components/popover/index.md @@ -6,8 +6,10 @@ ### 基本用法 当Popover弹出时，会基于`reference`插槽的内容进行定位。 - -
+:::demo +```vue + + ``` +::: ### 自定义内容 自定义`reference`插槽的内容与弹出提示内容。 -
- +:::demo + +```vue + -```html -
- - - -
+ ``` +::: + ### 弹出位置 总共支持12个弹出位置。 -
- - - - - - - - - - - - -
- -
- - - - - - - - - - - - -
- -
- - - - - - - - - - - - -
+:::demo -
- - - - - - - - - - - - -
- -```html -
- +```vue +