From d6213a7b4e4ae895382bf5c6aab057eb8a6fa156 Mon Sep 17 00:00:00 2001 From: Gavin <19986739+wjw-gavin@users.noreply.github.com> Date: Sat, 18 Feb 2023 14:54:44 +0800 Subject: [PATCH] feat(BackTop): support css variable and prop of z-index (#11582) * feat(BackTop): support css variable and prop of z-index * docs: update README --- packages/vant/src/back-top/BackTop.tsx | 13 +++++++++---- packages/vant/src/back-top/README.md | 4 ++++ packages/vant/src/back-top/README.zh-CN.md | 2 ++ packages/vant/src/back-top/index.less | 2 ++ packages/vant/src/back-top/test/index.spec.ts | 2 ++ packages/vant/src/back-top/types.ts | 3 +++ 6 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/back-top/BackTop.tsx b/packages/vant/src/back-top/BackTop.tsx index 8a777c7a0..959916dc1 100644 --- a/packages/vant/src/back-top/BackTop.tsx +++ b/packages/vant/src/back-top/BackTop.tsx @@ -13,10 +13,12 @@ import { // Utils import { + extend, addUnit, inBrowser, numericProp, getScrollTop, + getZIndexStyle, createNamespace, makeNumericProp, } from '../utils'; @@ -33,6 +35,7 @@ const [name, bem] = createNamespace('back-top'); export const backTopProps = { right: numericProp, bottom: numericProp, + zIndex: numericProp, target: [String, Object] as PropType, offset: makeNumericProp(200), immediate: Boolean, @@ -58,10 +61,12 @@ export default defineComponent({ const root = ref(); const scrollParent = ref(); - const style = computed(() => ({ - right: addUnit(props.right), - bottom: addUnit(props.bottom), - })); + const style = computed(() => + extend(getZIndexStyle(props.zIndex), { + right: addUnit(props.right), + bottom: addUnit(props.bottom), + }) + ); const onClick = (event: MouseEvent) => { emit('click', event); diff --git a/packages/vant/src/back-top/README.md b/packages/vant/src/back-top/README.md index b87059554..0d6c9ea58 100644 --- a/packages/vant/src/back-top/README.md +++ b/packages/vant/src/back-top/README.md @@ -126,6 +126,7 @@ Add `immediate` prop to scroll to top immediately. | offset | The component will not display until the scroll offset reaches this value | _number_ | `200` | | teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` | | immediate `v4.0.9` | Whether to scroll to top immediately | _boolean_ | `false` | +| z-index | Set the z-index to a fixed value | _number \| string_ | `100` | ### Events @@ -157,5 +158,8 @@ The component provides the following CSS variables, which can be used to customi | ------------------------- | ----------------- | ----------- | | --van-back-top-size | _40px_ | - | | --van-back-top-icon-size | _20px_ | - | +| --van-back-top-right | _30px_ | - | +| --van-back-top-bottom | _40px_ | - | +| --van-back-top-z-index | _100_ | - | | --van-back-top-text-color | _#fff_ | - | | --van-back-top-background | _var(--van-blue)_ | - | diff --git a/packages/vant/src/back-top/README.zh-CN.md b/packages/vant/src/back-top/README.zh-CN.md index dd793355e..4c4a0ec59 100644 --- a/packages/vant/src/back-top/README.zh-CN.md +++ b/packages/vant/src/back-top/README.zh-CN.md @@ -128,6 +128,7 @@ export default { | offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` | | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` | | immediate `v4.0.9` | 是否瞬间滚动到顶部 | _boolean_ | `false` | +| z-index | 设置组件的 z-index 层级 | _number \| string_ | `100` | ### Events @@ -161,5 +162,6 @@ import type { BackTopProps, BackTopThemeVars } from 'vant'; | --van-back-top-icon-size | _20px_ | - | | --van-back-top-right | _30px_ | - | | --van-back-top-bottom | _40px_ | - | +| --van-back-top-z-index | _100_ | - | | --van-back-top-text-color | _#fff_ | - | | --van-back-top-background | _var(--van-blue)_ | - | diff --git a/packages/vant/src/back-top/index.less b/packages/vant/src/back-top/index.less index 391e43c2a..148446e14 100644 --- a/packages/vant/src/back-top/index.less +++ b/packages/vant/src/back-top/index.less @@ -2,6 +2,7 @@ --van-back-top-size: 40px; --van-back-top-right: 30px; --van-back-top-bottom: 40px; + --van-back-top-z-index: 100; --van-back-top-icon-size: 20px; --van-back-top-text-color: #fff; --van-back-top-background: var(--van-blue); @@ -16,6 +17,7 @@ height: var(--van-back-top-size); right: var(--van-back-top-right); bottom: var(--van-back-top-bottom); + z-index: var(--van-back-top-z-index); cursor: pointer; color: var(--van-back-top-text-color); border-radius: var(--van-radius-max); diff --git a/packages/vant/src/back-top/test/index.spec.ts b/packages/vant/src/back-top/test/index.spec.ts index 40cfd253d..60003806a 100644 --- a/packages/vant/src/back-top/test/index.spec.ts +++ b/packages/vant/src/back-top/test/index.spec.ts @@ -8,12 +8,14 @@ test('should allow to custom position by position prop', async () => { props: { right: 30, bottom: 100, + zIndex: 200, teleport: root, }, }); const backTopEl = root.querySelector('.van-back-top')!; expect(backTopEl.style.right).toBe('30px'); expect(backTopEl.style.bottom).toBe('100px'); + expect(backTopEl.style.zIndex).toBe('200'); }); test('should allow position prop to contain unit', async () => { diff --git a/packages/vant/src/back-top/types.ts b/packages/vant/src/back-top/types.ts index f8fd46147..532f2475b 100644 --- a/packages/vant/src/back-top/types.ts +++ b/packages/vant/src/back-top/types.ts @@ -1,5 +1,8 @@ export type BackTopThemeVars = { backTopSize?: string; + backTopRight?: string; + backTopBottom?: string; + backTopZIndex?: number | string; backTopIconSize?: string; backTopTextColor?: string; backTopBackground?: string;