From a1e0f485deceb2ca4485213beb24f8d424c15ee7 Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 9 Nov 2021 08:41:22 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90backTop=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E6=A0=B7=E5=BC=8F=E3=80=81=E8=BF=94=E5=9B=9E=E9=A1=B6?= =?UTF-8?q?=E9=83=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/back-top/__tests__/back-top.spec.ts | 8 +++ packages/devui-vue/devui/back-top/index.ts | 17 ++++++ .../devui/back-top/src/assets/top.svg | 1 + .../devui/back-top/src/back-top-types.ts | 20 +++++++ .../devui/back-top/src/back-top.scss | 23 ++++++++ .../devui-vue/devui/back-top/src/back-top.tsx | 29 ++++++++++ .../devui/back-top/src/hooks/index.ts | 3 + .../devui/back-top/src/hooks/usePosition.ts | 11 ++++ .../docs/components/back-top/index.md | 56 +++++++++++++++++++ 9 files changed, 168 insertions(+) create mode 100644 packages/devui-vue/devui/back-top/__tests__/back-top.spec.ts create mode 100644 packages/devui-vue/devui/back-top/index.ts create mode 100644 packages/devui-vue/devui/back-top/src/assets/top.svg create mode 100644 packages/devui-vue/devui/back-top/src/back-top-types.ts create mode 100644 packages/devui-vue/devui/back-top/src/back-top.scss create mode 100644 packages/devui-vue/devui/back-top/src/back-top.tsx create mode 100644 packages/devui-vue/devui/back-top/src/hooks/index.ts create mode 100644 packages/devui-vue/devui/back-top/src/hooks/usePosition.ts create mode 100644 packages/devui-vue/docs/components/back-top/index.md diff --git a/packages/devui-vue/devui/back-top/__tests__/back-top.spec.ts b/packages/devui-vue/devui/back-top/__tests__/back-top.spec.ts new file mode 100644 index 00000000..81a160a5 --- /dev/null +++ b/packages/devui-vue/devui/back-top/__tests__/back-top.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { BackTop } from '../index'; + +describe('back-top test', () => { + it('back-top init render', async () => { + // todo + }) +}) diff --git a/packages/devui-vue/devui/back-top/index.ts b/packages/devui-vue/devui/back-top/index.ts new file mode 100644 index 00000000..3a5f745c --- /dev/null +++ b/packages/devui-vue/devui/back-top/index.ts @@ -0,0 +1,17 @@ +import type { App } from 'vue' +import BackTop from './src/back-top' + +BackTop.install = function (app: App): void { + app.component(BackTop.name, BackTop) +} + +export { BackTop } + +export default { + title: 'BackTop 回到顶部', + category: '导航', + status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(BackTop as any) + } +} diff --git a/packages/devui-vue/devui/back-top/src/assets/top.svg b/packages/devui-vue/devui/back-top/src/assets/top.svg new file mode 100644 index 00000000..85155751 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/assets/top.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 new file mode 100644 index 00000000..b0f13c77 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/back-top-types.ts @@ -0,0 +1,20 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export type Position = { + position: 'fixed' + bottom: string + right: string +} + +export const backTopProps = { + bottom: { + type: String as PropType, + default: '50px' + }, + right: { + type: String as PropType, + default: '30px' + } +} as const + +export type BackTopProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/back-top/src/back-top.scss b/packages/devui-vue/devui/back-top/src/back-top.scss new file mode 100644 index 00000000..1aea66b8 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/back-top.scss @@ -0,0 +1,23 @@ +@import '../../style/theme/color'; + +.devui-back-top { + width: 40px; + height: 40px; + cursor: pointer; + z-index: 9; + .devui-back-top-content { + width: 40px; + height: 40px; + background-color: $devui-text-weak; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + opacity: 0.4; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + opacity: 1; + } + } +} diff --git a/packages/devui-vue/devui/back-top/src/back-top.tsx b/packages/devui-vue/devui/back-top/src/back-top.tsx new file mode 100644 index 00000000..32d705a8 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/back-top.tsx @@ -0,0 +1,29 @@ +import { defineComponent, ref } from 'vue' +import { backTopProps, BackTopProps } from './back-top-types' +import { usePosition } from './hooks' +import './back-top.scss' +import IconTop from './assets/top.svg' + +export default defineComponent({ + name: 'DBackTop', + props: backTopProps, + emits: [], + setup(props: BackTopProps, ctx) { + const position = usePosition(props) + const scrollToTop = () => { + // 运行在浏览器则调用该方法 + window && + window.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth' //平滑滚动 + }) + } + + return () => ( +
+
{}
+
+ ) + } +}) diff --git a/packages/devui-vue/devui/back-top/src/hooks/index.ts b/packages/devui-vue/devui/back-top/src/hooks/index.ts new file mode 100644 index 00000000..22441ce6 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/hooks/index.ts @@ -0,0 +1,3 @@ +import usePosition from './usePosition.ts' + +export { usePosition } diff --git a/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts b/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts new file mode 100644 index 00000000..b7c80f16 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/hooks/usePosition.ts @@ -0,0 +1,11 @@ +import { BackTopProps, Position } from '../back-top-types' + +export default function (props: BackTopProps): Position { + const { bottom, right } = props + + return { + position: 'fixed', + bottom, + right + } +} diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md new file mode 100644 index 00000000..06b388a3 --- /dev/null +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -0,0 +1,56 @@ +# BackTop 回到顶部 + + + +### 何时使用 + + + +### 基本用法 + + + +:::demo + +```vue + + + + + +``` + +::: + +### d-back-top + +d-back-top 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :--: | :--: | :--: | :--: | :-------: | +| | | | | | +| | | | | | +| | | | | | + +d-back-top 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | -- Gitee From edd2f4f7847fdb07efe2b92d782b416fc8ebe53c Mon Sep 17 00:00:00 2001 From: codedance Date: Tue, 9 Nov 2021 08:45:23 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/docs/components/back-top/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md index 06b388a3..940febc0 100644 --- a/packages/devui-vue/docs/components/back-top/index.md +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -1,14 +1,14 @@ # BackTop 回到顶部 - +返回页面顶部的操作按钮。 ### 何时使用 - +当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时。 ### 基本用法 - +回到顶部按钮的默认样式，距离底部 50px，右侧 30px。 :::demo @@ -41,11 +41,11 @@ export default defineComponent({ d-back-top 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--: | :--: | :--: | :--: | :-------: | -| | | | | | -| | | | | | -| | | | | | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :----: | :------: | :----: | :------------------------: | :---------------: | +| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | +| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | +| | | | | | d-back-top 事件 -- Gitee From 34eab4607f5b0b6e39672581e6f9384846bb0926 Mon Sep 17 00:00:00 2001 From: codedance Date: Wed, 10 Nov 2021 10:26:30 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=8C=89=E9=92=AE=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/back-top/src/back-top.scss | 11 ++++-- .../devui-vue/devui/back-top/src/back-top.tsx | 19 ++++++++-- .../docs/components/back-top/index.md | 36 +++++++++++++++++++ 3 files changed, 61 insertions(+), 5 deletions(-) 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 1aea66b8..17edc69c 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.scss +++ b/packages/devui-vue/devui/back-top/src/back-top.scss @@ -5,12 +5,10 @@ height: 40px; cursor: pointer; z-index: 9; - .devui-back-top-content { + .devui-back-top-base { width: 40px; height: 40px; - background-color: $devui-text-weak; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - opacity: 0.4; border-radius: 50%; display: flex; align-items: center; @@ -20,4 +18,11 @@ opacity: 1; } } + .devui-back-top-content { + opacity: 0.4; + background-color: $devui-text-weak; + } + .devui-backtop-custom { + background-color: #fff; + } } 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 32d705a8..b95b0405 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.tsx +++ b/packages/devui-vue/devui/back-top/src/back-top.tsx @@ -10,6 +10,8 @@ export default defineComponent({ emits: [], setup(props: BackTopProps, ctx) { const position = usePosition(props) + const slots = ctx.slots + const scrollToTop = () => { // 运行在浏览器则调用该方法 window && @@ -21,8 +23,21 @@ export default defineComponent({ } return () => ( -
-
{}
+
+
+ {slots.default ? slots.default() : } +
) } diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md index 940febc0..f2be59b9 100644 --- a/packages/devui-vue/docs/components/back-top/index.md +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -17,6 +17,9 @@
这里看不到我嘿嘿，下滑试试
+ + +
@@ -37,6 +40,39 @@ export default defineComponent({ ::: +### 自定义 + +回到顶部组件可自定义按钮样式，限制宽高：40px \* 40px。同时可通过 class 个性化设置按钮样式。 + +:::demo + +```vue + + + + + +``` + +::: + ### d-back-top d-back-top 参数 -- Gitee From 4f8d200b47e3a9cd299a24fbceec43ccf8ef661b Mon Sep 17 00:00:00 2001 From: codedance Date: Wed, 10 Nov 2021 11:07:21 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=8F=98=E9=87=8F=E6=A0=B7=E5=BC=8F=E7=9A=84=E5=BC=95?= =?UTF-8?q?=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/back-top/src/back-top.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 17edc69c..18685214 100644 --- a/packages/devui-vue/devui/back-top/src/back-top.scss +++ b/packages/devui-vue/devui/back-top/src/back-top.scss @@ -1,4 +1,4 @@ -@import '../../style/theme/color'; +@import '../../styles-var/devui-var'; .devui-back-top { width: 40px; -- Gitee From da3074c3c2ce98dceb93eff18f06a9b5e5f0c980 Mon Sep 17 00:00:00 2001 From: "~zZ.Lucky" Date: Wed, 10 Nov 2021 11:44:42 +0000 Subject: [PATCH 5/6] Update packages/devui-vue/devui/back-top/src/back-top-types.ts --- packages/devui-vue/devui/back-top/src/back-top-types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b0f13c77..50712aaa 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 @@ -8,7 +8,7 @@ export type Position = { export const backTopProps = { bottom: { - type: String as PropType, + type: String, default: '50px' }, right: { -- Gitee From 17f3a88ddf29059cc987bcde39cbb6e167c9352c Mon Sep 17 00:00:00 2001 From: codedance Date: Wed, 10 Nov 2021 19:46:58 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=B1=9E=E6=80=A7=E7=B1=BB=E5=9E=8B?= 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 | 4 ++-- 1 file changed, 2 insertions(+), 2 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 b0f13c77..6f76d1cd 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 @@ -8,11 +8,11 @@ export type Position = { export const backTopProps = { bottom: { - type: String as PropType, + type: String, default: '50px' }, right: { - type: String as PropType, + type: String, default: '30px' } } as const -- Gitee