mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +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 './validate';
|
||||||
export * from './interceptor';
|
export * from './interceptor';
|
||||||
export * from './with-install';
|
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',
|
path: 'floating-panel',
|
||||||
title: 'FloatingPanel 浮动面板',
|
title: 'FloatingPanel 浮动面板',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'floating-bubble',
|
||||||
|
title: 'FloatingBubble 浮动气泡',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'loading',
|
path: 'loading',
|
||||||
title: 'Loading 加载',
|
title: 'Loading 加载',
|
||||||
@ -715,6 +719,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
|||||||
path: 'floating-panel',
|
path: 'floating-panel',
|
||||||
title: 'FloatingPanel',
|
title: 'FloatingPanel',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'floating-bubble',
|
||||||
|
title: 'FloatingBubble',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'loading',
|
path: 'loading',
|
||||||
title: 'Loading',
|
title: 'Loading',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user