mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 02:16:12 +08:00
feat(BackTop): new component (#11236)
* feat(BackTop): new component * perf(BackTop): perf BackTop component * perf(BackTop): improve code * perf: improve type
This commit is contained in:
Gavin
GitHub
parent
e19e982292
commit
5cf4322143
124
packages/vant/src/back-top/BackTop.tsx
Normal file
124
packages/vant/src/back-top/BackTop.tsx
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import {
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
Teleport,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
defineComponent,
|
||||||
|
type PropType,
|
||||||
|
type TeleportProps,
|
||||||
|
type ExtractPropTypes,
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
// Utils
|
||||||
|
import {
|
||||||
|
isObject,
|
||||||
|
inBrowser,
|
||||||
|
getScrollTop,
|
||||||
|
createNamespace,
|
||||||
|
makeNumericProp,
|
||||||
|
} from '../utils';
|
||||||
|
import { throttle } from '../lazyload/vue-lazyload/util';
|
||||||
|
|
||||||
|
// Composables
|
||||||
|
import { useEventListener, getScrollParent } from '@vant/use';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import { Icon } from '../icon';
|
||||||
|
|
||||||
|
const [name, bem] = createNamespace('back-top');
|
||||||
|
|
||||||
|
export const backTopProps = {
|
||||||
|
right: makeNumericProp(30),
|
||||||
|
bottom: makeNumericProp(40),
|
||||||
|
target: [String, Object] as PropType<TeleportProps['to']>,
|
||||||
|
visibilityHeight: makeNumericProp(200),
|
||||||
|
teleport: {
|
||||||
|
type: [String, Object] as PropType<TeleportProps['to']>,
|
||||||
|
default: 'body',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name,
|
||||||
|
|
||||||
|
props: backTopProps,
|
||||||
|
|
||||||
|
emits: ['click'],
|
||||||
|
|
||||||
|
setup(props, { emit, slots }) {
|
||||||
|
const show = ref(false);
|
||||||
|
const scrollParent = ref<Window | HTMLElement>();
|
||||||
|
const backTopEl = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
|
let target: Window | HTMLElement;
|
||||||
|
|
||||||
|
const backTopStyle = computed(() => ({
|
||||||
|
right: `${props.right}px`,
|
||||||
|
bottom: `${props.bottom}px`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const onClick = (event: MouseEvent) => {
|
||||||
|
emit('click', event);
|
||||||
|
target.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const scroll = () => {
|
||||||
|
show.value = getScrollTop(target) >= props.visibilityHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
const throttleScroll = throttle(scroll, 300);
|
||||||
|
|
||||||
|
const getTarget = () => {
|
||||||
|
const { target } = props;
|
||||||
|
|
||||||
|
if (typeof target === 'string') {
|
||||||
|
const el = document.querySelector(props.target as string);
|
||||||
|
if (!el) {
|
||||||
|
throw Error('[Vant] BackTop: target element is not found.');
|
||||||
|
}
|
||||||
|
return el as HTMLElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isObject(target)) return target;
|
||||||
|
throw Error(
|
||||||
|
'[Vant] BackTop: type of prop "target" should be a selector or an element object'
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEventListener('scroll', throttleScroll, { target: scrollParent });
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
if (inBrowser) {
|
||||||
|
scrollParent.value = document.documentElement;
|
||||||
|
target = props.target
|
||||||
|
? (getTarget() as typeof target)
|
||||||
|
: (getScrollParent(backTopEl.value!) as typeof target);
|
||||||
|
scrollParent.value = target as typeof target;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const Content = (
|
||||||
|
<div
|
||||||
|
ref="backTopEl"
|
||||||
|
class={bem({ active: show.value })}
|
||||||
|
style={backTopStyle.value}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{slots.default ? slots.default() : <Icon name="back-top" />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
if (props.teleport) {
|
||||||
|
return <Teleport to={props.teleport}>{Content}</Teleport>;
|
||||||
|
}
|
||||||
|
return Content;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
115
packages/vant/src/back-top/README.md
Normal file
115
packages/vant/src/back-top/README.md
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
# BackTop
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
A button to back to top.
|
||||||
|
|
||||||
|
### 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 { BackTop } from 'vant';
|
||||||
|
|
||||||
|
const app = createApp();
|
||||||
|
app.use(BackTop);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
|
||||||
|
<van-back-top />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customizations
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top>
|
||||||
|
<div class="custom" style="">Customizations</div>
|
||||||
|
</van-back-top>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.custom {
|
||||||
|
width: 200px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Target to be listened to.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="container">
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top target=".container" bottom="100" right="30" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.container {
|
||||||
|
height: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| target | Can be a `selector` or `HTMLElement` | _string \| HTMLElement_ | - |
|
||||||
|
| right | Right distance of the page | _number \| string_ | `30` |
|
||||||
|
| bottom | Bottom distance of the page | _number \| string_ | `40` |
|
||||||
|
| visibility-height | The button will not show until the scroll height reaches this value | _number_ | `200` |
|
||||||
|
| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
| ------- | ------------------------- |
|
||||||
|
| default | customize default content |
|
||||||
|
|
||||||
|
## 主题定制
|
||||||
|
|
||||||
|
### 样式变量
|
||||||
|
|
||||||
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
||||||
|
|
||||||
|
| 名称 | 默认值 | 描述 |
|
||||||
|
| ------------------------- | ----------------- | ---- |
|
||||||
|
| --van-back-top-size | _40px_ | - |
|
||||||
|
| --van-back-top-icon-size | _20px_ | - |
|
||||||
|
| --van-back-top-text-color | _#fff_ | - |
|
||||||
|
| --van-back-top-background | _var(--van-blue)_ | - |
|
||||||
119
packages/vant/src/back-top/README.zh-CN.md
Normal file
119
packages/vant/src/back-top/README.zh-CN.md
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
# BackTop 回到顶部
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
返回页面顶部的操作按钮。
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createApp } from 'vue';
|
||||||
|
import { BackTop } from 'vant';
|
||||||
|
|
||||||
|
const app = createApp();
|
||||||
|
app.use(BackTop);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
通过滚动 Demo 页面查看右下角按钮。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
|
||||||
|
<van-back-top />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义内容
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top>
|
||||||
|
<div class="custom" style="">自定义内容</div>
|
||||||
|
</van-back-top>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.custom {
|
||||||
|
width: 200px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设置监听目标
|
||||||
|
|
||||||
|
可以通过设置 `target` 控制监听哪个元素触发 Back Top。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="container">
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top target=".container" bottom="100" right="30" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.container {
|
||||||
|
height: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| target | 触发滚动的目标对象，支持`selector`和`HTMLElement` | _string \| HTMLElement_ | - |
|
||||||
|
| right | 距离页面右侧的距离 | _number \| string_ | `30` |
|
||||||
|
| bottom | 距离页面底部的距离 | _number \| string_ | `40` |
|
||||||
|
| visibility-height | 滚动高度达到此参数值才显示 | _number_ | `200` |
|
||||||
|
| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
| ------- | ------------------ |
|
||||||
|
| default | 自定义按钮显示内容 |
|
||||||
|
|
||||||
|
## 主题定制
|
||||||
|
|
||||||
|
### 样式变量
|
||||||
|
|
||||||
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
||||||
|
|
||||||
|
| 名称 | 默认值 | 描述 |
|
||||||
|
| ------------------------- | ----------------- | ---- |
|
||||||
|
| --van-back-top-size | _40px_ | - |
|
||||||
|
| --van-back-top-icon-size | _20px_ | - |
|
||||||
|
| --van-back-top-text-color | _#fff_ | - |
|
||||||
|
| --van-back-top-background | _var(--van-blue)_ | - |
|
||||||
59
packages/vant/src/back-top/demo/index.vue
Normal file
59
packages/vant/src/back-top/demo/index.vue
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import VanBackTop from '..';
|
||||||
|
import VanTabs from '../../tabs';
|
||||||
|
import VanTab from '../../tab';
|
||||||
|
import VanCell from '../../cell';
|
||||||
|
import { useTranslate } from '../../../docs/site';
|
||||||
|
|
||||||
|
const t = useTranslate({
|
||||||
|
'zh-CN': {
|
||||||
|
type1: '基础用法',
|
||||||
|
type2: '自定义内容',
|
||||||
|
type3: '设置监听目标',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
type1: 'Basic Usage',
|
||||||
|
type2: 'Customizations',
|
||||||
|
type3: 'Target',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const list = [...Array(50).keys()];
|
||||||
|
const targetEl = ref<HTMLElement>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<van-tabs>
|
||||||
|
<van-tab :title="t('type1')">
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top />
|
||||||
|
</van-tab>
|
||||||
|
|
||||||
|
<van-tab :title="t('type2')">
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top bottom="100" right="30">
|
||||||
|
<div class="custom" style="">{{ t('type2') }}</div>
|
||||||
|
</van-back-top>
|
||||||
|
</van-tab>
|
||||||
|
|
||||||
|
<van-tab :title="t('type3')">
|
||||||
|
<div class="back-top--test" ref="targetEl">
|
||||||
|
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||||
|
<van-back-top :target="targetEl" bottom="150" right="30" />
|
||||||
|
</div>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.back-top--test {
|
||||||
|
height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.custom {
|
||||||
|
width: 200px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
packages/vant/src/back-top/index.less
Normal file
35
packages/vant/src/back-top/index.less
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
:root {
|
||||||
|
--van-back-top-size: 40px;
|
||||||
|
--van-back-top-icon-size: 20px;
|
||||||
|
--van-back-top-text-color: #fff;
|
||||||
|
--van-back-top-background: var(--van-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-back-top {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: var(--van-back-top-size);
|
||||||
|
min-height: var(--van-back-top-size);
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--van-back-top-text-color);
|
||||||
|
border-radius: var(--van-radius-max);
|
||||||
|
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
|
||||||
|
transform: scale(0);
|
||||||
|
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
|
||||||
|
background-color: var(--van-back-top-background);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-icon {
|
||||||
|
font-size: var(--van-back-top-icon-size);
|
||||||
|
font-weight: var(--van-font-bold);
|
||||||
|
}
|
||||||
|
}
|
||||||
15
packages/vant/src/back-top/index.ts
Normal file
15
packages/vant/src/back-top/index.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { withInstall } from '../utils';
|
||||||
|
import _BackTop from './BackTop';
|
||||||
|
|
||||||
|
export const BackTop = withInstall(_BackTop);
|
||||||
|
export default BackTop;
|
||||||
|
export { backTopProps } from './BackTop';
|
||||||
|
|
||||||
|
export type { BackTopProps } from './BackTop';
|
||||||
|
export type { BackTopThemeVars } from './types';
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
VanBackTop: typeof BackTop;
|
||||||
|
}
|
||||||
|
}
|
||||||
426
packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
Normal file
426
packages/vant/src/back-top/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,426 @@
|
|||||||
|
// 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">
|
||||||
|
Customizations
|
||||||
|
</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">
|
||||||
|
Target
|
||||||
|
</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
|
||||||
|
>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
0
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
4
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
5
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
6
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
7
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
8
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
9
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
10
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
11
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
12
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
13
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
14
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
15
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
16
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
17
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
18
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
19
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
20
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
21
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
22
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
23
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
24
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
25
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
26
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
27
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
28
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
29
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
30
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
31
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
32
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
33
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
34
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
35
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
36
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
37
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
38
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
39
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
40
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
41
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
42
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
43
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
44
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
45
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
46
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
47
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
48
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell">
|
||||||
|
<div class="van-cell__title">
|
||||||
|
<span>
|
||||||
|
49
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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/back-top/test/demo.spec.ts
Normal file
4
packages/vant/src/back-top/test/demo.spec.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo/index.vue';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
21
packages/vant/src/back-top/test/index.spec.ts
Normal file
21
packages/vant/src/back-top/test/index.spec.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import BackTop from '..';
|
||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
test('test position prop', async () => {
|
||||||
|
mount(BackTop, {
|
||||||
|
props: {
|
||||||
|
right: 30,
|
||||||
|
bottom: 100,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const backTopEl = document.querySelector('.van-back-top') as HTMLDivElement;
|
||||||
|
expect(backTopEl.style.right).toBe('30px');
|
||||||
|
expect(backTopEl.style.bottom).toBe('100px');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('test backTop event', async () => {
|
||||||
|
const wrapper = mount(BackTop);
|
||||||
|
|
||||||
|
await wrapper.trigger('click');
|
||||||
|
expect(wrapper.emitted()).toBeDefined();
|
||||||
|
});
|
||||||
6
packages/vant/src/back-top/types.ts
Normal file
6
packages/vant/src/back-top/types.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export type BackTopThemeVars = {
|
||||||
|
backTopSize?: string;
|
||||||
|
backTopIconSize?: string;
|
||||||
|
backTopTextColor?: string;
|
||||||
|
backTopBackground?: string;
|
||||||
|
};
|
||||||
@ -384,6 +384,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
|||||||
path: 'tree-select',
|
path: 'tree-select',
|
||||||
title: 'TreeSelect 分类选择',
|
title: 'TreeSelect 分类选择',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'back-top',
|
||||||
|
title: 'BackTop 回到顶部',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -795,6 +799,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
|||||||
path: 'tree-select',
|
path: 'tree-select',
|
||||||
title: 'TreeSelect',
|
title: 'TreeSelect',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'back-top',
|
||||||
|
title: 'BackTop',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user