From 02740dd82eb4334a4c0ad1cfa2e486b23c61c07c Mon Sep 17 00:00:00 2001 From: ShuGang Zhou Date: Wed, 21 Jun 2023 22:38:50 +0800 Subject: [PATCH] feat(FloatingBubble): add new FloatingBubble component (#11880) * feat(FloatingBubble): add new FloatingBubble component * feat(FloatingBubble): add new FloatingBubble component test case * feat(FloatingBubble): add new FloatingBubble component test case * feat(FloatingBubble): add new FloatingBubble component docs * feat(FloatingBubble): optimized code * feat(FloatingBubble): fix docs * feat(FloatingBubble): teleported should be closed when deactivated * feat(FloatingBubble): fix nav config * fix: optimized code * fix: optimized code * fix: optimized code * fix: optimized code * fix: optimized code * fix: optimized code * fix: optimized code * fix: optimized code --- .../src/floating-bubble/FloatingBubble.tsx | 247 ++++++++++++++++ packages/vant/src/floating-bubble/README.md | 131 +++++++++ .../vant/src/floating-bubble/README.zh-CN.md | 131 +++++++++ .../vant/src/floating-bubble/demo/index.vue | 83 ++++++ packages/vant/src/floating-bubble/index.less | 38 +++ packages/vant/src/floating-bubble/index.ts | 19 ++ .../test/__snapshots__/demo.spec.ts.snap | 79 ++++++ .../src/floating-bubble/test/demo.spec.ts | 4 + .../src/floating-bubble/test/index.spec.ts | 264 ++++++++++++++++++ packages/vant/src/utils/closest.ts | 5 + packages/vant/src/utils/index.ts | 1 + packages/vant/vant.config.mjs | 8 + 12 files changed, 1010 insertions(+) create mode 100644 packages/vant/src/floating-bubble/FloatingBubble.tsx create mode 100644 packages/vant/src/floating-bubble/README.md create mode 100644 packages/vant/src/floating-bubble/README.zh-CN.md create mode 100644 packages/vant/src/floating-bubble/demo/index.vue create mode 100644 packages/vant/src/floating-bubble/index.less create mode 100644 packages/vant/src/floating-bubble/index.ts create mode 100644 packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/vant/src/floating-bubble/test/demo.spec.ts create mode 100644 packages/vant/src/floating-bubble/test/index.spec.ts create mode 100644 packages/vant/src/utils/closest.ts diff --git a/packages/vant/src/floating-bubble/FloatingBubble.tsx b/packages/vant/src/floating-bubble/FloatingBubble.tsx new file mode 100644 index 000000000..084993b57 --- /dev/null +++ b/packages/vant/src/floating-bubble/FloatingBubble.tsx @@ -0,0 +1,247 @@ +import { + PropType, + Teleport, + TeleportProps, + computed, + defineComponent, + nextTick, + onMounted, + ref, + watch, + onActivated, + onDeactivated, + type CSSProperties, + type ExtractPropTypes, +} from 'vue'; + +import { useRect, useEventListener } from '@vant/use'; +import { useTouch } from '../composables/use-touch'; +import { + addUnit, + closest, + createNamespace, + makeNumberProp, + makeStringProp, + pick, + windowWidth, + windowHeight, +} from '../utils'; + +import Icon from '../icon'; + +export type FloatingBubbleAxis = 'x' | 'y' | 'xy' | 'lock'; + +export type FloatingBubbleMagnetic = 'x' | 'y'; + +export type FloatingBubbleOffset = { + x: number; + y: number; +}; + +type FloatingBubbleBoundary = { + top: number; + right: number; + bottom: number; + left: number; +}; + +export const floatingBubbleProps = { + axis: makeStringProp('y'), + magnetic: String as PropType, + icon: String, + gap: makeNumberProp(24), + offset: { + type: Object as unknown as PropType, + default: () => ({ x: -1, y: -1 }), + }, + teleport: { + type: [String, Object] as PropType, + default: 'body', + }, +}; + +export type FloatingBubbleProps = ExtractPropTypes; + +const [name, bem] = createNamespace('floating-bubble'); + +export default defineComponent({ + name, + + props: floatingBubbleProps, + + emits: ['click', 'update:offset', 'offsetChange'], + + setup(props, { slots, emit }) { + const rootRef = ref(); + + const state = ref({ + x: 0, + y: 0, + width: 0, + height: 0, + }); + + const boundary = computed(() => ({ + top: props.gap, + right: windowWidth.value - state.value.height - props.gap, + bottom: windowHeight.value - state.value.width - props.gap, + left: props.gap, + })); + + const dragging = ref(false); + let initialized = false; + + const rootStyle = computed(() => { + const style: CSSProperties = {}; + + const x = addUnit(state.value.x); + const y = addUnit(state.value.y); + style.transform = `translate3d(${x}, ${y}, 0)`; + + if (dragging.value || !initialized) { + style.transition = 'none'; + } + + return style; + }); + + const updateState = () => { + const { width, height } = useRect(rootRef.value!); + const { offset } = props; + state.value = { + x: offset.x > -1 ? offset.x : windowWidth.value - width - props.gap, + y: offset.y > -1 ? offset.y : windowHeight.value - height - props.gap, + width, + height, + }; + }; + + const touch = useTouch(); + let prevX = 0; + let prevY = 0; + + const onTouchStart = (e: TouchEvent) => { + touch.start(e); + dragging.value = true; + + prevX = state.value.x; + prevY = state.value.y; + }; + + const onTouchMove = (e: TouchEvent) => { + e.preventDefault(); + + touch.move(e); + + if (props.axis === 'lock') return; + + if (!touch.isTap.value) { + if (props.axis === 'x' || props.axis === 'xy') { + let nextX = prevX + touch.deltaX.value; + if (nextX < boundary.value.left) nextX = boundary.value.left; + if (nextX > boundary.value.right) nextX = boundary.value.right; + state.value.x = nextX; + } + + if (props.axis === 'y' || props.axis === 'xy') { + let nextY = prevY + touch.deltaY.value; + if (nextY < boundary.value.top) nextY = boundary.value.top; + if (nextY > boundary.value.bottom) nextY = boundary.value.bottom; + state.value.y = nextY; + } + + const offset = pick(state.value, ['x', 'y']); + emit('update:offset', offset); + } + }; + + // useEventListener will set passive to `false` to eliminate the warning of Chrome + useEventListener('touchmove', onTouchMove, { + target: rootRef, + }); + + const onTouchEnd = () => { + dragging.value = false; + + nextTick(() => { + if (props.magnetic === 'x') { + const nextX = closest( + [boundary.value.left, boundary.value.right], + state.value.x + ); + state.value.x = nextX; + } + if (props.magnetic === 'y') { + const nextY = closest( + [boundary.value.top, boundary.value.bottom], + state.value.y + ); + state.value.y = nextY; + } + + if (!touch.isTap.value) { + const offset = pick(state.value, ['x', 'y']); + emit('update:offset', offset); + if (prevX !== offset.x || prevY !== offset.y) { + emit('offsetChange', offset); + } + } + }); + }; + + const onClick = (e: MouseEvent) => { + if (touch.isTap.value) emit('click', e); + }; + + onMounted(() => { + updateState(); + nextTick(() => { + initialized = true; + }); + }); + + watch( + [windowWidth, windowHeight, () => props.gap, () => props.offset], + () => updateState(), + { deep: true } + ); + + const show = ref(true); + + onActivated(() => { + show.value = true; + }); + + onDeactivated(() => { + if (props.teleport) { + show.value = false; + } + }); + + return () => { + const Content = ( +
+ {slots.default ? ( + slots.default() + ) : ( + + )} +
+ ); + return props.teleport ? ( + {Content} + ) : ( + Content + ); + }; + }, +}); diff --git a/packages/vant/src/floating-bubble/README.md b/packages/vant/src/floating-bubble/README.md new file mode 100644 index 000000000..171ec1096 --- /dev/null +++ b/packages/vant/src/floating-bubble/README.md @@ -0,0 +1,131 @@ +# FloatingBubble + +### Intro + +Clickable bubbles that hover around the edge of the page. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { FloatingBubble } from 'vant'; + +const app = createApp(); +app.use(FloatingBubble); +``` + +## Usage + +### Basic Usage + +In the default x position, drag in the y direction is allowed. + +```html + +``` + +```js +import { showToast } from 'vant'; + +export default { + setup() { + const onClick = () => { + showToast('Click Bubble'); + }; + return { onClick }; + }, +}; +``` + +### Free drag and magnetic + +Allow x and y drags to attach to the nearest side of the x axis. + +```html + +``` + +```js +import { showToast } from 'vant'; + +export default { + setup() { + const onOffsetChange = (offset: OffsetType) => { + showToast(offset.x + '__' + offset.y); + }; + return { onOffsetChange }; + }, +}; +``` + +### Use v-model + +Use `v-model:offset` control the position. + +```html + +``` + +```js +export default { + setup() { + const offset = ref < OffsetType > { x: 200, y: 400 }; + return { offset }; + }, +}; +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| v-model:offset | Control bubble position | _OffsetType_ | `Default right-bottom coordinate` | +| axis | Drag direction, `xy` stands for free drag, `lock` stands for disable drag | _'x' \| 'y' \| 'xy' \| 'lock'_ | `y` | +| magnetic | Direction of automatic magnetic absorption | _'x' \| 'y'_ | - | +| icon | Bubble icon | _string_ | - | +| gap | Minimum gap between the bubble and the window, unit `px` | _number_ | `24` | +| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` | + +### Events + +| Event | Description | Arguments | +| --- | --- | --- | +| click | Triggered when a component is clicked | _MouseEvent_ | +| offset-change | Triggered when the position changes due to user dragging | _{x: string, y: string}_ | + +### Slots + +| Name | Description | +| ------- | ------------------------------------ | +| default | Customize the bubble display content | + +### Types + +The component exports the following type definitions: + +```ts +export type { + FloatingBubbleProps, + FloatingBubbleAxis, + FloatingBubbleMagnetic, + FloatingBubbleOffset, +} from 'vant'; +``` + +## Theming + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). + +| Name | Default Value | Description | +| --- | --- | --- | +| --van-floating-bubble-size | _48px_ | - | +| --van-floating-bubble-initial-space | _24px_ | - | +| --van-floating-bubble-background | _var(--van-primary-color)_ | - | +| --van-floating-bubble-color | _var(--van-background-2)_ | - | +| --van-floating-bubble-z-index | _999_ | - | diff --git a/packages/vant/src/floating-bubble/README.zh-CN.md b/packages/vant/src/floating-bubble/README.zh-CN.md new file mode 100644 index 000000000..3e01a3971 --- /dev/null +++ b/packages/vant/src/floating-bubble/README.zh-CN.md @@ -0,0 +1,131 @@ +# FloatingBubble 浮动气泡 + +### 介绍 + +悬浮在页面边缘的可点击气泡。 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { FloatingBubble } from 'vant'; + +const app = createApp(); +app.use(FloatingBubble); +``` + +## 代码演示 + +### 基础用法 + +在 x 轴默认位置，允许 y 轴方向拖拽。 + +```html + +``` + +```js +import { showToast } from 'vant'; + +export default { + setup() { + const onClick = () => { + showToast('点击气泡'); + }; + return { onClick }; + }, +}; +``` + +### 自由拖拽和磁吸 + +允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边。 + +```html + +``` + +```js +import { showToast } from 'vant'; + +export default { + setup() { + const onOffsetChange = (offset: OffsetType) => { + showToast(offset.x + '__' + offset.y); + }; + return { onOffsetChange }; + }, +}; +``` + +### 使用 v-model + +使用 `v-model:offset` 控制位置。 + +```html + +``` + +```js +export default { + setup() { + const offset = ref < OffsetType > { x: 200, y: 400 }; + return { offset }; + }, +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| v-model:offset | 控制气泡位置 | _OffsetType_ | `默认右下角坐标` | +| axis | 拖拽的方向，`xy` 代表自由拖拽，`lock` 代表禁止拖拽 | _'x' \| 'y' \| 'xy' \| 'lock'_ | `y` | +| magnetic | 自动磁吸的方向 | _'x' \| 'y'_ | - | +| icon | 气泡图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - | +| gap | 气泡与窗口的最小间距，单位为 `px` | _number_ | `24` | +| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` | + +### Events + +| 事件 | 说明 | 回调参数 | +| ------------- | ---------------------------- | ------------------------ | +| click | 点击组件时触发 | _MouseEvent_ | +| offset-change | 由用户拖拽导致位置改变后触发 | _{x: string, y: string}_ | + +### Slots + +| 名称 | 说明 | +| ------- | ------------------ | +| default | 自定义气泡显示内容 | + +### 类型定义 + +组件导出以下类型定义： + +```ts +export type { + FloatingBubbleProps, + FloatingBubbleAxis, + FloatingBubbleMagnetic, + FloatingBubbleOffset, +} from 'vant'; +``` + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | -------------------------- | ---- | +| --van-floating-bubble-size | _48px_ | - | +| --van-floating-bubble-initial-space | _24px_ | - | +| --van-floating-bubble-background | _var(--van-primary-color)_ | - | +| --van-floating-bubble-color | _var(--van-background-2)_ | - | +| --van-floating-bubble-z-index | _999_ | - | diff --git a/packages/vant/src/floating-bubble/demo/index.vue b/packages/vant/src/floating-bubble/demo/index.vue new file mode 100644 index 000000000..c824a9b24 --- /dev/null +++ b/packages/vant/src/floating-bubble/demo/index.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/vant/src/floating-bubble/index.less b/packages/vant/src/floating-bubble/index.less new file mode 100644 index 000000000..eef63437e --- /dev/null +++ b/packages/vant/src/floating-bubble/index.less @@ -0,0 +1,38 @@ +:root { + --van-floating-bubble-size: 48px; + --van-floating-bubble-initial-space: 24px; + --van-floating-bubble-background: var(--van-primary-color); + --van-floating-bubble-color: var(--van-background-2); + --van-floating-bubble-z-index: 999; +} + +.van-floating-bubble { + position: fixed; + left: 0; + top: 0; + right: var(--van-floating-bubble-initial-space); + bottom: var(--van-floating-bubble-initial-space); + width: var(--van-floating-bubble-size); + height: var(--van-floating-bubble-size); + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + cursor: pointer; + user-select: none; + touch-action: none; + background: var(--van-floating-bubble-background); + color: var(--van-floating-bubble-color); + border-radius: var(--van-radius-max); + z-index: var(--van-floating-bubble-z-index); + transition: transform 0.3s; + + &:active { + opacity: 0.9; + } + + &__icon { + font-size: 28px; + } +} diff --git a/packages/vant/src/floating-bubble/index.ts b/packages/vant/src/floating-bubble/index.ts new file mode 100644 index 000000000..7463f4c03 --- /dev/null +++ b/packages/vant/src/floating-bubble/index.ts @@ -0,0 +1,19 @@ +import { withInstall } from '../utils'; +import _FloatingBubble from './FloatingBubble'; + +export const FloatingBubble = withInstall(_FloatingBubble); +export default FloatingBubble; + +export { floatingBubbleProps } from './FloatingBubble'; +export type { + FloatingBubbleProps, + FloatingBubbleAxis, + FloatingBubbleMagnetic, + FloatingBubbleOffset, +} from './FloatingBubble'; + +declare module 'vue' { + export interface GlobalComponents { + FloatingBubble: typeof FloatingBubble; + } +} diff --git a/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 000000000..14f36feee --- /dev/null +++ b/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+
+
+ + + +
+
+
+
+
+
+

+ In the default x position, drag in the y direction is allowed +

+
+ + +
+
+`; diff --git a/packages/vant/src/floating-bubble/test/demo.spec.ts b/packages/vant/src/floating-bubble/test/demo.spec.ts new file mode 100644 index 000000000..c0e0c95b9 --- /dev/null +++ b/packages/vant/src/floating-bubble/test/demo.spec.ts @@ -0,0 +1,4 @@ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/packages/vant/src/floating-bubble/test/index.spec.ts b/packages/vant/src/floating-bubble/test/index.spec.ts new file mode 100644 index 000000000..8225b009a --- /dev/null +++ b/packages/vant/src/floating-bubble/test/index.spec.ts @@ -0,0 +1,264 @@ +import { useWindowSize } from '@vant/use'; +import FloatingBubble from '..'; + +import { + later, + mockGetBoundingClientRect, + mount, + trigger, + triggerDrag, +} from '../../../test'; + +test('should render correctly when all props set', async () => { + useWindowSize(); + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + const wrapper = mount(FloatingBubble, { + props: { + teleport: root, + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await later(); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24}px, ${ + window.innerHeight - 48 - 24 + }px, 0)` + ); + + await wrapper.setProps({ + gap: 50, + }); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 50}px, ${ + window.innerHeight - 48 - 50 + }px, 0)` + ); + + await wrapper.setProps({ + offset: { + x: 400, + y: 400, + }, + }); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${400}px, ${400}px, 0)` + ); + + await wrapper.setProps({ + icon: 'chat', + }); + + expect(floatingBubbleEl.querySelector('.van-icon-chat')).not.toBeNull(); + + restore(); +}); + +test('should only y axis direction move when axis is default', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + mount(FloatingBubble, { + props: { + teleport: root, + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, -100, -100); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24}px, ${ + window.innerHeight - 48 - 24 - 100 + }px, 0)` + ); + + restore(); +}); + +test('should only x axis direction adn emit offsetChange move when axis is "x" ', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + const wrapper = mount(FloatingBubble, { + props: { + teleport: root, + axis: 'x', + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, -100, -100); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24 - 100}px, ${ + window.innerHeight - 48 - 24 + }px, 0)` + ); + + expect(wrapper.emitted('offsetChange')?.[0][0]).toEqual({ + x: window.innerWidth - 48 - 24 - 100, + y: window.innerHeight - 48 - 24, + }); + + restore(); +}); + +test('should free direction move when axis is "xy" ', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + mount(FloatingBubble, { + props: { + teleport: root, + axis: 'xy', + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, -100, -100); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24 - 100}px, ${ + window.innerHeight - 48 - 24 - 100 + }px, 0)` + ); + + restore(); +}); + +test('should free direction move when axis is "xy" ', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + mount(FloatingBubble, { + props: { + teleport: root, + axis: 'xy', + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, -100, -100); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24 - 100}px, ${ + window.innerHeight - 48 - 24 - 100 + }px, 0)` + ); + + restore(); +}); + +test('should free direction move and magnetic to x axios when magnetic is "x" ', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + mount(FloatingBubble, { + props: { + teleport: root, + axis: 'xy', + magnetic: 'x', + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, -100, -100); + + await later(400); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${window.innerWidth - 48 - 24}px, ${ + window.innerHeight - 48 - 24 - 100 + }px, 0)` + ); + + await triggerDrag(floatingBubbleEl, -600, -100); + + await later(400); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${24}px, ${window.innerHeight - 48 - 24 - 200}px, 0)` + ); + + restore(); +}); + +test('should offset control positioning when use v-model:offset ', async () => { + const restore = mockGetBoundingClientRect({ width: 48, height: 48 }); + + const root = document.createElement('div'); + const wrapper = mount(FloatingBubble, { + props: { + teleport: root, + axis: 'xy', + offset: { + x: 200, + y: 200, + }, + }, + }); + + const floatingBubbleEl = root.querySelector( + '.van-floating-bubble' + )!; + + await triggerDrag(floatingBubbleEl, 100, 100); + + await later(400); + + expect(floatingBubbleEl.style.transform).toEqual( + `translate3d(${300}px, ${300}px, 0)` + ); + + const emitList = wrapper.emitted('update:offset'); + expect(emitList?.[emitList.length - 1][0]).toEqual({ + x: 300, + y: 300, + }); + + restore(); +}); + +test('should emit click when click wrapper', async () => { + const root = document.createElement('div'); + const wrapper = mount(FloatingBubble, { + props: { + teleport: root, + axis: 'xy', + offset: { + x: 200, + y: 200, + }, + }, + }); + + await later(); + + trigger(wrapper, 'click'); + + expect(wrapper.emitted('click')).toBeFalsy(); +}); diff --git a/packages/vant/src/utils/closest.ts b/packages/vant/src/utils/closest.ts new file mode 100644 index 000000000..2e25238c6 --- /dev/null +++ b/packages/vant/src/utils/closest.ts @@ -0,0 +1,5 @@ +export function closest(arr: number[], target: number) { + return arr.reduce((pre, cur) => + Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur + ); +} diff --git a/packages/vant/src/utils/index.ts b/packages/vant/src/utils/index.ts index e05ffe73e..8ba7d36b8 100644 --- a/packages/vant/src/utils/index.ts +++ b/packages/vant/src/utils/index.ts @@ -7,3 +7,4 @@ export * from './constant'; export * from './validate'; export * from './interceptor'; export * from './with-install'; +export * from './closest'; diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 33fdca2bd..67421cd7c 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -255,6 +255,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'floating-panel', title: 'FloatingPanel 浮动面板', }, + { + path: 'floating-bubble', + title: 'FloatingBubble 浮动气泡', + }, { path: 'loading', title: 'Loading 加载', @@ -715,6 +719,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'floating-panel', title: 'FloatingPanel', }, + { + path: 'floating-bubble', + title: 'FloatingBubble', + }, { path: 'loading', title: 'Loading',