docs(BackTop): add click event document (#11514)

This commit is contained in:
neverland 2023-01-24 22:23:11 +08:00 committed by GitHub
parent 2cddef07c9
commit 3b060d7982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 13 deletions

View File

@ -98,4 +98,4 @@ Please make sure to read the [Contributing Guide](https://github.com/vant-ui/van
### LICENSE
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89).

View File

@ -115,4 +115,4 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0(与 Vue 3 一
### 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议,请自由地享受和参与开源

View File

@ -116,6 +116,12 @@ export default {
| offset | The component will not display until the scroll offset reaches this value | _number_ | `200` |
| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
### Events
| Event | Description | Arguments |
| ----- | --------------------------------- | ------------------- |
| click | Emitted when Component is clicked | _event: MouseEvent_ |
### Slots
| Name | Description |

View File

@ -20,7 +20,7 @@ app.use(BackTop);
### 基础用法
请滚动示例页面来查看右下角的返回顶部按钮。
请滚动右侧的示例页面,当页面滚动 `200px` 时,右下角会出现返回顶部按钮。
```html
<van-cell v-for="item in list" :key="item" :title="item" /> <van-back-top />
@ -118,6 +118,12 @@ export default {
| offset | 滚动高度达到此参数值时才显示组件 | _number_ | `200` |
| teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` |
### Events
| 事件 | 说明 | 回调参数 |
| ----- | -------------- | ------------------- |
| click | 点击组件时触发 | _event: MouseEvent_ |
### Slots
| 名称 | 说明 |

View File

@ -27,7 +27,7 @@ const targetEl = ref<HTMLElement>();
</script>
<template>
<van-tabs v-model:active="activeTab">
<van-tabs v-model:active="activeTab" :ellipsis="false">
<van-tab :title="t('basicUsage')">
<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top v-if="activeTab === 0" />

View File

@ -4,50 +4,50 @@ 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"
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
aria-orientation="horizontal"
>
<div id="van-tabs-0"
role="tab"
class="van-tab van-tab--line van-tab--active"
class="van-tab van-tab--line van-tab--grow van-tab--active"
tabindex="0"
aria-selected="true"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
<span class="van-tab__text">
Basic Usage
</span>
</div>
<div id="van-tabs-1"
role="tab"
class="van-tab van-tab--line"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
<span class="van-tab__text">
Custom Position
</span>
</div>
<div id="van-tabs-2"
role="tab"
class="van-tab van-tab--line"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
<span class="van-tab__text">
Custom Content
</span>
</div>
<div id="van-tabs-3"
role="tab"
class="van-tab van-tab--line"
class="van-tab van-tab--line van-tab--grow"
tabindex="-1"
aria-selected="false"
aria-controls="van-tab"
>
<span class="van-tab__text van-tab__text--ellipsis">
<span class="van-tab__text">
Set Scroll Target
</span>
</div>