Vue.js的Back-to-top组件，单击后可将页面滚动到顶部
Vue Backtotop组件 (Vue Backtotop Component)
A Back-to-top component for Vue.js, which scroll page to the top when clicked.
Vue.js的Back-to-top组件，单击后可将页面滚动到顶部。
通过npm安装 (Install via npm)
npm install vue-backtotop --save导入和使用 (Import and use)
Import for global usage
导入以供全球使用
import Vue from 'vue'
import BackToTop from 'vue-backtotop'
Vue.use(BackToTop)
...Or on a single component
或在单个组件上
import BackToTop from 'vue-backtotop'
...
},
components: { BackToTop }
...道具 (Props)
| Name | Type | Default | Description |
|---|---|---|---|
| text | String | 'Voltar ao topo | Text of back to top button |
| visibleoffset | String or Number | 600 | Where the component should visible when user scroll reach certain offset |
| bottom | String | 40px | Bottom position of the component |
| right | String | 30px | Right position of the component |
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 文本 | 串 | 'Volo ao topo | 返回页首按钮的文字 |
| 可见偏移 | 字符串或数字 | 600 | 当用户滚动达到某个偏移量时组件应显示的位置 |
| 底部 | 串 | 40像素 | 组件的底部位置 |
| 对 | 串 | 30像素 | 组件的正确位置 |
大事记 (Events)
| Name | Description |
|---|---|
| scrolled | Fired when page's scroll ends |
| 名称 | 描述 |
|---|---|
| 卷动 | 页面滚动结束时触发 |
如何使用 (How to use)
Currently, the vue-backtotop has a property named "text", that is the text which will be visible on button. The default value is "Voltar ao topo".
当前，vue-backtotop具有一个名为“文本”的属性，即在按钮上可见的文本。 默认值为“ Voltar ao topo”。
<back-to-top text="Back to top"></back-to-top>The button to back to top become visible at window scroll at 600 > px. If you want to change this value, pass a property named "visibleOffset" with a number value.
在窗口滚动至600> px时，可以看到从上到下的按钮。 如果要更改此值，请传递一个带有数字值的名为“ visibleOffset”的属性。
<back-to-top text="Back to top" visibleoffset="500"></back-to-top>You can also know when scroll ends
您还可以知道滚动何时结束
<back-to-top text="Back to top" @scrolled="myFunction"></back-to-top>Now, it's possible to use your own html/vue component inside vue-backtotop component
现在，可以在vue-backtotop组件内使用自己的html / vue组件
<!-- in your template -->
<back-to-top bottom="50px" right="50px">
<button type="button" class="btn btn-info btn-to-top"><i class="fa fa-chevron-up"></i></button>
</back-to-top>/* in your css */
.btn-to-top {
width: 60px;
height: 60px;
padding: 10px 16px;
border-radius: 50%;
font-size: 22px;
line-height: 22px;
}