From 41f0e9de7c4a4e52b9f86ff5fee0ebf4a142ae97 Mon Sep 17 00:00:00 2001 From: codedance Date: Thu, 11 Nov 2021 10:43:22 +0800 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=E6=8C=89=E9=92=AE=E9=98=B4=E5=BD=B1?= =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=88=B0=E9=BB=98=E8=AE=A4=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84class?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/back-top/src/back-top-types.ts | 1 - packages/devui-vue/devui/back-top/src/back-top.scss | 4 ++-- packages/devui-vue/devui/back-top/src/hooks/usePosition.ts | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/devui-vue/devui/back-top/src/back-top-types.ts b/packages/devui-vue/devui/back-top/src/back-top-types.ts index 6f76d1cd..0dfbf051 100644 --- a/packages/devui-vue/devui/back-top/src/back-top-types.ts +++ b/packages/devui-vue/devui/back-top/src/back-top-types.ts @@ -1,7 +1,6 @@ import type { PropType, ExtractPropTypes } from 'vue' export type Position = { - position: 'fixed' bottom: string right: string } diff --git a/packages/devui-vue/devui/back-top/src/back-top.scss b/packages/devui-vue/devui/back-top/src/back-top.scss index 18685214..e0d28a36 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.scss +++ b/packages/devui-vue/devui/back-top/src/back-top.scss @@ -1,6 +1,7 @@ @import '../../styles-var/devui-var'; .devui-back-top { + position: fixed; width: 40px; height: 40px; cursor: pointer; @@ -8,12 +9,10 @@ .devui-back-top-base { width: 40px; height: 40px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; - &:hover { opacity: 1; } @@ -21,6 +20,7 @@ .devui-back-top-content { opacity: 0.4; background-color: $devui-text-weak; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .devui-backtop-custom { background-color: #fff; diff --git a/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts b/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts index b7c80f16..c66c16d5 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts @@ -4,7 +4,6 @@ export default function (props: BackTopProps): Position { const { bottom, right } = props return { - position: 'fixed', bottom, right } -- Gitee From c25a2b1ef35f14d8d16b0187558115f0d5efbe2f Mon Sep 17 00:00:00 2001 From: codedance Date: Fri, 12 Nov 2021 16:26:04 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BA=86target?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AF=B9=E8=B1=A1=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/back-top/src/back-top-types.ts | 4 ++++ packages/devui-vue/devui/back-top/src/hooks/index.ts | 3 ++- .../devui-vue/devui/back-top/src/hooks/useTarget.ts | 11 +++++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 packages/devui-vue/devui/back-top/src/hooks/useTarget.ts diff --git a/packages/devui-vue/devui/back-top/src/back-top-types.ts b/packages/devui-vue/devui/back-top/src/back-top-types.ts index 0dfbf051..49a3d02d 100644 --- a/packages/devui-vue/devui/back-top/src/back-top-types.ts +++ b/packages/devui-vue/devui/back-top/src/back-top-types.ts @@ -13,6 +13,10 @@ export const backTopProps = { right: { type: String, default: '30px' + }, + target: { + type: String, + default: 'window' } } as const diff --git a/packages/devui-vue/devui/back-top/src/hooks/index.ts b/packages/devui-vue/devui/back-top/src/hooks/index.ts index 22441ce6..e22f304c 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/index.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/index.ts @@ -1,3 +1,4 @@ import usePosition from './usePosition.ts' +import useTarget from './useTarget.ts' -export { usePosition } +export { usePosition, useTarget } diff --git a/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts b/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts new file mode 100644 index 00000000..51f89e53 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts @@ -0,0 +1,11 @@ +import { BackTopProps } from '../back-top-types' + +export default function (props: BackTopProps) { + const target = props.target // target为元素选择器 + const currTarget = + target === 'window' + ? window || document.documentElement || document.body + : document.querySelector(target) || window + + return currTarget +} -- Gitee From c2ab14403a52fbf656d42312768fa90f6c1be0de Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 14 Nov 2021 17:46:53 +0800 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=89=B9?= =?UTF-8?q?=E6=80=A7visibleHeight,=E6=BB=9A=E5=8A=A8=E4=B8=80=E5=AE=9A?= =?UTF-8?q?=E8=B7=9D=E7=A6=BB=E6=98=BE=E7=A4=BAbacktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/back-top/src/back-top-types.ts | 4 ++++ .../devui-vue/devui/back-top/src/back-top.tsx | 12 ++++++----- .../devui/back-top/src/hooks/index.ts | 5 ++++- .../back-top/src/hooks/useEventListener.ts | 7 +++++++ .../devui/back-top/src/hooks/useThrottle.ts | 10 +++++++++ .../devui/back-top/src/hooks/useVisibility.ts | 21 +++++++++++++++++++ 6 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 packages/devui-vue/devui/back-top/src/hooks/useEventListener.ts create mode 100644 packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts create mode 100644 packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts diff --git a/packages/devui-vue/devui/back-top/src/back-top-types.ts b/packages/devui-vue/devui/back-top/src/back-top-types.ts index 49a3d02d..1209ed58 100644 --- a/packages/devui-vue/devui/back-top/src/back-top-types.ts +++ b/packages/devui-vue/devui/back-top/src/back-top-types.ts @@ -17,6 +17,10 @@ export const backTopProps = { target: { type: String, default: 'window' + }, + visibleHeight: { + type: Number, + default: 300 } } as const diff --git a/packages/devui-vue/devui/back-top/src/back-top.tsx b/packages/devui-vue/devui/back-top/src/back-top.tsx index b95b0405..00ca5d36 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.tsx +++ b/packages/devui-vue/devui/back-top/src/back-top.tsx @@ -1,6 +1,6 @@ import { defineComponent, ref } from 'vue' import { backTopProps, BackTopProps } from './back-top-types' -import { usePosition } from './hooks' +import { usePosition, useVisibility } from './hooks' import './back-top.scss' import IconTop from './assets/top.svg' @@ -11,6 +11,7 @@ export default defineComponent({ setup(props: BackTopProps, ctx) { const position = usePosition(props) const slots = ctx.slots + let isVisible = useVisibility(props) const scrollToTop = () => { // 运行在浏览器则调用该方法 @@ -24,13 +25,14 @@ export default defineComponent({ return () => (
void +/* 简陋版待完善 */ +function useEventListener(target: HTMLElement, event: string, cb: cbFn) { + target.addEventListener(event, cb) +} + +export default useEventListener diff --git a/packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts b/packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts new file mode 100644 index 00000000..ab5278fc --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts @@ -0,0 +1,10 @@ +export default function (fn, delay) { + let last = null + return (...args) => { + const now = +Date.now() + if (now - last > delay) { + last = now + return fn.apply(this, args) + } + } +} diff --git a/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts b/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts new file mode 100644 index 00000000..e2564f80 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts @@ -0,0 +1,21 @@ +import { computed, ref } from 'vue' +import { BackTopProps } from '../back-top-types' +import { useTarget, useEventListener, useThrottle } from '../hooks' +export default function (props: BackTopProps) { + const visibleHeight = props.visibleHeight + + const currTarget = useTarget(props) + + const currScrollTop = ref(0) + const ThrottleCBFn = function () { + currScrollTop.value = currTarget === window ? window.pageYOffset : currTarget.scrollTop + console.log(currScrollTop.value) + } + // 监听滚动事件 手动更新ScrollTop + useEventListener(currTarget, 'scroll', useThrottle(ThrottleCBFn, 150)) + + // const currScrollTop = ref(currTarget === window ? window.pageYOffset : currTarget.scrollTop) + const isVisible = computed(() => currScrollTop.value >= visibleHeight) + + return isVisible +} -- Gitee From 73ad094bfab25bef9f550b1a25a5c9b7e2837a60 Mon Sep 17 00:00:00 2001 From: codedance Date: Sun, 14 Nov 2021 19:51:50 +0800 Subject: [PATCH 4/7] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84backTop=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/docs/components/back-top/index.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md index f2be59b9..8e43e578 100644 --- a/packages/devui-vue/docs/components/back-top/index.md +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -77,11 +77,13 @@ export default defineComponent({ d-back-top 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----: | :------: | :----: | :------------------------: | :---------------: | -| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | -| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | -| | | | | | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :-----------: | :------: | :------: | :----------------------------------------------------------: | :---------------: | +| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | +| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | +| visibleHeight | `number` | 300 | 可选，滚动高度达到visibleHeight所设值后展示回到顶部按钮，单位为`px` | [示例](#基本用法) | +| target | `string` | 'window' | 可选，触发滚动的元素选择器 | [示例](#基本用法) | +| | | | | | d-back-top 事件 -- Gitee From ce6129da592701dbd81b56e092ee351d86deef68 Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 16 Nov 2021 22:03:06 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EbackTop=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=B5=8C=E5=85=A5=E8=87=AA=E5=AE=9A=E4=B9=89=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E5=AE=B9=E5=99=A8=E5=86=85=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/back-top/src/back-top.tsx | 11 +++++++---- .../back-top/src/hooks/useEventListener.ts | 2 +- .../devui/back-top/src/hooks/useTarget.ts | 16 ++++++++++++---- .../devui/back-top/src/hooks/useVisibility.ts | 18 +++++++++--------- 4 files changed, 29 insertions(+), 18 deletions(-) diff --git a/packages/devui-vue/devui/back-top/src/back-top.tsx b/packages/devui-vue/devui/back-top/src/back-top.tsx index 00ca5d36..1939a4e0 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.tsx +++ b/packages/devui-vue/devui/back-top/src/back-top.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref } from 'vue' +import { defineComponent, onMounted, ref } from 'vue' import { backTopProps, BackTopProps } from './back-top-types' import { usePosition, useVisibility } from './hooks' import './back-top.scss' @@ -9,12 +9,14 @@ export default defineComponent({ props: backTopProps, emits: [], setup(props: BackTopProps, ctx) { - const position = usePosition(props) const slots = ctx.slots - let isVisible = useVisibility(props) + const backTopRef = ref(null) + + const position = usePosition(props) + let isVisible = useVisibility(props, backTopRef) const scrollToTop = () => { - // 运行在浏览器则调用该方法 + // toTop方法暂定 window && window.scrollTo({ top: 0, @@ -26,6 +28,7 @@ export default defineComponent({ return () => (
void /* 简陋版待完善 */ function useEventListener(target: HTMLElement, event: string, cb: cbFn) { - target.addEventListener(event, cb) + if (target) target.addEventListener(event, cb) } export default useEventListener diff --git a/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts b/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts index 51f89e53..220e770b 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts @@ -1,11 +1,19 @@ import { BackTopProps } from '../back-top-types' -export default function (props: BackTopProps) { +export default function (props: BackTopProps, backTopRef) { const target = props.target // target为元素选择器 + + const getTargetEl = () => { + const targetEl = document.querySelector(target) + if (!targetEl) throw new Error(`props ${target} is not existed`) + + // 设置定位 + targetEl.style.position = 'relative' + backTopRef.value.style.position = 'absolute' + return targetEl + } const currTarget = - target === 'window' - ? window || document.documentElement || document.body - : document.querySelector(target) || window + target === 'window' ? window || document.documentElement || document.body : getTargetEl() return currTarget } diff --git a/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts b/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts index e2564f80..d67a537d 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts @@ -1,20 +1,20 @@ -import { computed, ref } from 'vue' +import { onMounted, computed, ref } from 'vue' import { BackTopProps } from '../back-top-types' import { useTarget, useEventListener, useThrottle } from '../hooks' -export default function (props: BackTopProps) { +export default function (props: BackTopProps, backTopRef) { const visibleHeight = props.visibleHeight - - const currTarget = useTarget(props) - const currScrollTop = ref(0) const ThrottleCBFn = function () { currScrollTop.value = currTarget === window ? window.pageYOffset : currTarget.scrollTop - console.log(currScrollTop.value) } - // 监听滚动事件 手动更新ScrollTop - useEventListener(currTarget, 'scroll', useThrottle(ThrottleCBFn, 150)) - // const currScrollTop = ref(currTarget === window ? window.pageYOffset : currTarget.scrollTop) + let currTarget = null + onMounted(() => { + currTarget = useTarget(props, backTopRef) + // 监听滚动事件 手动更新ScrollTop + useEventListener(currTarget, 'scroll', useThrottle(ThrottleCBFn, 150)) + }) + const isVisible = computed(() => currScrollTop.value >= visibleHeight) return isVisible -- Gitee From 24b633ad96298841d9bede8286e401997f04efb5 Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 16 Nov 2021 22:03:55 +0800 Subject: [PATCH 6/7] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E6=96=87=E6=A1=A3=E5=92=8C=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/back-top/index.md | 77 +++++++++++++++++-- 1 file changed, 70 insertions(+), 7 deletions(-) diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md index 8e43e578..76cf74ff 100644 --- a/packages/devui-vue/docs/components/back-top/index.md +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -73,17 +73,80 @@ export default defineComponent({ ::: +### 嵌入容器内部 + +通过设置 target 参数，可对特定容器进行返回顶部操作。 + +:::demo + +```vue + + + + + +``` + +::: + ### d-back-top d-back-top 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :------: | :------: | :----------------------------------------------------------: | :---------------: | -| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | -| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | -| visibleHeight | `number` | 300 | 可选，滚动高度达到visibleHeight所设值后展示回到顶部按钮，单位为`px` | [示例](#基本用法) | -| target | `string` | 'window' | 可选，触发滚动的元素选择器 | [示例](#基本用法) | -| | | | | | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :-----------: | :------: | :------: | :-------------------------------------------------------------------: | :-------------------: | +| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | +| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | +| visibleHeight | `number` | 300 | 可选，滚动高度达到 visibleHeight 所设值后展示回到顶部按钮，单位为`px` | [示例](#基本用法) | +| target | `string` | 'window' | 可选，触发滚动的元素选择器 | [示例](#嵌入容器内部) | +| | | | | | d-back-top 事件 -- Gitee From 51c4fee04aeca29e2322ee9dd633bd7459eca8eb Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 23 Nov 2021 17:25:07 +0800 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E6=9B=B4=E6=94=B9=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=91=BD=E5=90=8D=E4=B8=BA=E4=B8=AD=E5=88=92=E7=BA=BF=E5=88=86?= =?UTF-8?q?=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/back-top/src/hooks/index.ts | 10 +++++----- .../{useEventListener.ts => use-eventListener.ts} | 0 .../back-top/src/hooks/{useTarget.ts => use-target.ts} | 0 .../src/hooks/{useThrottle.ts => use-throttle.ts} | 0 .../src/hooks/{useVisibility.ts => use-visibility.ts} | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) rename packages/devui-vue/devui/back-top/src/hooks/{useEventListener.ts => use-eventListener.ts} (100%) rename packages/devui-vue/devui/back-top/src/hooks/{useTarget.ts => use-target.ts} (100%) rename packages/devui-vue/devui/back-top/src/hooks/{useThrottle.ts => use-throttle.ts} (100%) rename packages/devui-vue/devui/back-top/src/hooks/{useVisibility.ts => use-visibility.ts} (90%) diff --git a/packages/devui-vue/devui/back-top/src/hooks/index.ts b/packages/devui-vue/devui/back-top/src/hooks/index.ts index defb34c9..4ae94650 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/index.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/index.ts @@ -1,7 +1,7 @@ -import usePosition from './usePosition.ts' -import useTarget from './useTarget.ts' -import useVisibility from './useVisibility.ts' -import useEventListener from './useEventListener.ts' -import useThrottle from './useThrottle.ts' +import usePosition from './use-position.ts' +import useTarget from './use-target.ts' +import useVisibility from './use-visibility.ts' +import useEventListener from './use-eventListener.ts' +import useThrottle from './use-throttle.ts' export { usePosition, useTarget, useVisibility, useEventListener, useThrottle } diff --git a/packages/devui-vue/devui/back-top/src/hooks/useEventListener.ts b/packages/devui-vue/devui/back-top/src/hooks/use-eventListener.ts similarity index 100% rename from packages/devui-vue/devui/back-top/src/hooks/useEventListener.ts rename to packages/devui-vue/devui/back-top/src/hooks/use-eventListener.ts diff --git a/packages/devui-vue/devui/back-top/src/hooks/useTarget.ts b/packages/devui-vue/devui/back-top/src/hooks/use-target.ts similarity index 100% rename from packages/devui-vue/devui/back-top/src/hooks/useTarget.ts rename to packages/devui-vue/devui/back-top/src/hooks/use-target.ts diff --git a/packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts b/packages/devui-vue/devui/back-top/src/hooks/use-throttle.ts similarity index 100% rename from packages/devui-vue/devui/back-top/src/hooks/useThrottle.ts rename to packages/devui-vue/devui/back-top/src/hooks/use-throttle.ts diff --git a/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts b/packages/devui-vue/devui/back-top/src/hooks/use-visibility.ts similarity index 90% rename from packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts rename to packages/devui-vue/devui/back-top/src/hooks/use-visibility.ts index d67a537d..5dc7061f 100644 --- a/packages/devui-vue/devui/back-top/src/hooks/useVisibility.ts +++ b/packages/devui-vue/devui/back-top/src/hooks/use-visibility.ts @@ -1,6 +1,6 @@ import { onMounted, computed, ref } from 'vue' import { BackTopProps } from '../back-top-types' -import { useTarget, useEventListener, useThrottle } from '../hooks' +import { useTarget, useEventListener, useThrottle } from '.' export default function (props: BackTopProps, backTopRef) { const visibleHeight = props.visibleHeight const currScrollTop = ref(0) -- Gitee