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 0000000000000000000000000000000000000000..81a160a5a19ee2ecb1f5b34b6b34689c50a30784 --- /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 0000000000000000000000000000000000000000..3a5f745c6a7af46599e3d69424067a3c2bea361b --- /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 0000000000000000000000000000000000000000..85155751f6a829d715675be6cb168316cf29ab65 --- /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 0000000000000000000000000000000000000000..6f76d1cda94731627d7ff7f283a1370b35a56c66 --- /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, + default: '50px' + }, + right: { + type: String, + 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 0000000000000000000000000000000000000000..18685214660f54b68cde866f7200e44b75ac0883 --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/back-top.scss @@ -0,0 +1,28 @@ +@import '../../styles-var/devui-var'; + +.devui-back-top { + width: 40px; + height: 40px; + cursor: pointer; + z-index: 9; + .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; + } + } + .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 new file mode 100644 index 0000000000000000000000000000000000000000..b95b0405dff3bc0134ca1a3fa90f7869303aea1c --- /dev/null +++ b/packages/devui-vue/devui/back-top/src/back-top.tsx @@ -0,0 +1,44 @@ +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 slots = ctx.slots + + const scrollToTop = () => { + // 运行在浏览器则调用该方法 + window && + window.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth' //平滑滚动 + }) + } + + return () => ( +
+
+ {slots.default ? slots.default() : } +
+
+ ) + } +}) 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 0000000000000000000000000000000000000000..22441ce6b655e4804964563e2d8beac34ad0aa73 --- /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 0000000000000000000000000000000000000000..b7c80f161f86ed297e7faf125afdba93e01beeb6 --- /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 0000000000000000000000000000000000000000..f2be59b9ed7b38c1fab6fe7f25fb189add33c192 --- /dev/null +++ b/packages/devui-vue/docs/components/back-top/index.md @@ -0,0 +1,92 @@ +# BackTop 回到顶部 + +返回页面顶部的操作按钮。 + +### 何时使用 + +当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时。 + +### 基本用法 + +回到顶部按钮的默认样式，距离底部 50px，右侧 30px。 + +:::demo + +```vue + + + + + +``` + +::: + +### 自定义 + +回到顶部组件可自定义按钮样式，限制宽高：40px \* 40px。同时可通过 class 个性化设置按钮样式。 + +:::demo + +```vue + + + + + +``` + +::: + +### d-back-top + +d-back-top 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :----: | :------: | :----: | :------------------------: | :---------------: | +| bottom | `string` | "50px" | 可选，按钮距离页面底部位置 | [示例](#基本用法) | +| right | `string` | "30px" | 可选，按钮距离页面右边距 | [示例](#基本用法) | +| | | | | | + +d-back-top 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | |