mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
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
This commit is contained in:
ShuGang Zhou
GitHub
parent
1545c07a71
commit
02740dd82e
247
packages/vant/src/floating-bubble/FloatingBubble.tsx
Normal file
247
packages/vant/src/floating-bubble/FloatingBubble.tsx
Normal file
@ -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<FloatingBubbleAxis>('y'),
|
||||
magnetic: String as PropType<FloatingBubbleMagnetic>,
|
||||
icon: String,
|
||||
gap: makeNumberProp(24),
|
||||
offset: {
|
||||
type: Object as unknown as PropType<FloatingBubbleOffset>,
|
||||
default: () => ({ x: -1, y: -1 }),
|
||||
},
|
||||
teleport: {
|
||||
type: [String, Object] as PropType<TeleportProps['to']>,
|
||||
default: 'body',
|
||||
},
|
||||
};
|
||||
|
||||
export type FloatingBubbleProps = ExtractPropTypes<typeof floatingBubbleProps>;
|
||||
|
||||
const [name, bem] = createNamespace('floating-bubble');
|
||||
|
||||
export default defineComponent({
|
||||
name,
|
||||
|
||||
props: floatingBubbleProps,
|
||||
|
||||
emits: ['click', 'update:offset', 'offsetChange'],
|
||||
|
||||
setup(props, { slots, emit }) {
|
||||
const rootRef = ref<HTMLDivElement>();
|
||||
|
||||
const state = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
const boundary = computed<FloatingBubbleBoundary>(() => ({
|
||||
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 = (
|
||||
<div
|
||||
class={bem()}
|
||||
ref={rootRef}
|
||||
onTouchstartPassive={onTouchStart}
|
||||
onTouchend={onTouchEnd}
|
||||
onTouchcancel={onTouchEnd}
|
||||
onClick={onClick}
|
||||
style={rootStyle.value}
|
||||
v-show={show.value}
|
||||
>
|
||||
{slots.default ? (
|
||||
slots.default()
|
||||
) : (
|
||||
<Icon name={props.icon} class={bem('icon')} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return props.teleport ? (
|
||||
<Teleport to={props.teleport}>{Content}</Teleport>
|
||||
) : (
|
||||
Content
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
131
packages/vant/src/floating-bubble/README.md
Normal file
131
packages/vant/src/floating-bubble/README.md
Normal file
@ -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
|
||||
<van-floating-bubble @click="onClick" />
|
||||
```
|
||||
|
||||
```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
|
||||
<van-floating-bubble axis="xy" magnetic="x" @offset-change="onOffsetChange" />
|
||||
```
|
||||
|
||||
```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
|
||||
<van-floating-bubble v-model:offset="offset" axis="xy" />
|
||||
```
|
||||
|
||||
```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_ | - |
|
||||
131
packages/vant/src/floating-bubble/README.zh-CN.md
Normal file
131
packages/vant/src/floating-bubble/README.zh-CN.md
Normal file
@ -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
|
||||
<van-floating-bubble @click="onClick" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { showToast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const onClick = () => {
|
||||
showToast('点击气泡');
|
||||
};
|
||||
return { onClick };
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自由拖拽和磁吸
|
||||
|
||||
允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边。
|
||||
|
||||
```html
|
||||
<van-floating-bubble axis="xy" magnetic="x" @offset-change="onOffsetChange" />
|
||||
```
|
||||
|
||||
```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
|
||||
<van-floating-bubble v-model:offset="offset" axis="xy" />
|
||||
```
|
||||
|
||||
```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_ | - |
|
||||
83
packages/vant/src/floating-bubble/demo/index.vue
Normal file
83
packages/vant/src/floating-bubble/demo/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { useTranslate } from '../../../docs/site';
|
||||
import VanFloatingBubble, { type FloatingBubbleOffset } from '..';
|
||||
import VanTabs from '../../tabs';
|
||||
import VanTab from '../../tab';
|
||||
import { showToast } from '../../toast';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
clickBubble: '点击气泡',
|
||||
freeMagnetic: '自由拖拽和磁吸',
|
||||
vModel: '双向绑定',
|
||||
basicUsageText: '在 x 轴默认位置，允许 y 轴方向拖拽',
|
||||
freeMagneticText: '允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边',
|
||||
vModelText: '使用 offset 控制位置，',
|
||||
},
|
||||
'en-US': {
|
||||
clickBubble: 'Click bubble',
|
||||
freeMagnetic: 'Free magnetic',
|
||||
vModel: 'vModel',
|
||||
basicUsageText:
|
||||
'In the default x position, drag in the y direction is allowed',
|
||||
freeMagneticText:
|
||||
'Allow x and y drags to attach to the nearest side of the x axis',
|
||||
vModelText: 'Use offset to control the position,',
|
||||
},
|
||||
});
|
||||
|
||||
const onOffsetChange = (offset: FloatingBubbleOffset) => {
|
||||
showToast(offset.x.toFixed(0) + '__' + offset.y.toFixed(0));
|
||||
};
|
||||
|
||||
const onClick = () => {
|
||||
showToast(t('clickBubble'));
|
||||
};
|
||||
|
||||
const activeName = ref(0);
|
||||
const offset = ref<FloatingBubbleOffset>({ x: 200, y: 400 });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-tabs v-model:active="activeName">
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<p class="text">{{ t('basicUsageText') }}</p>
|
||||
<van-floating-bubble
|
||||
v-if="activeName === 0"
|
||||
icon="chat"
|
||||
@click="onClick"
|
||||
/>
|
||||
</van-tab>
|
||||
<van-tab :title="t('freeMagnetic')">
|
||||
<p class="text">{{ t('freeMagneticText') }}</p>
|
||||
<van-floating-bubble
|
||||
v-if="activeName === 1"
|
||||
icon="chat"
|
||||
axis="xy"
|
||||
magnetic="x"
|
||||
@offset-change="onOffsetChange"
|
||||
/>
|
||||
</van-tab>
|
||||
<van-tab :title="t('vModel')">
|
||||
<p class="text">
|
||||
{{ t('vModelText') }} x：{{ offset.x.toFixed(0) }} y:
|
||||
{{ offset.y.toFixed(0) }}
|
||||
</p>
|
||||
<van-floating-bubble
|
||||
v-if="activeName === 2"
|
||||
icon="chat"
|
||||
v-model:offset="offset"
|
||||
axis="xy"
|
||||
/>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.text {
|
||||
text-align: center;
|
||||
padding: 100px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
38
packages/vant/src/floating-bubble/index.less
Normal file
38
packages/vant/src/floating-bubble/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
19
packages/vant/src/floating-bubble/index.ts
Normal file
19
packages/vant/src/floating-bubble/index.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Free magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
vModel
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-tabs__line"
|
||||
style="transform: translateX(50px) translateX(-50%);"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<p class="text">
|
||||
In the default x position, drag in the y direction is allowed
|
||||
</p>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
4
packages/vant/src/floating-bubble/test/demo.spec.ts
Normal file
4
packages/vant/src/floating-bubble/test/demo.spec.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo/index.vue';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
264
packages/vant/src/floating-bubble/test/index.spec.ts
Normal file
264
packages/vant/src/floating-bubble/test/index.spec.ts
Normal file
@ -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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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<HTMLDivElement>(
|
||||
'.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();
|
||||
});
|
||||
5
packages/vant/src/utils/closest.ts
Normal file
5
packages/vant/src/utils/closest.ts
Normal file
@ -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
|
||||
);
|
||||
}
|
||||
@ -7,3 +7,4 @@ export * from './constant';
|
||||
export * from './validate';
|
||||
export * from './interceptor';
|
||||
export * from './with-install';
|
||||
export * from './closest';
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user