pb-vue-scrolltotop
v0.0.4
Published
基于Vue的回到顶部组件
Downloads
10
Readme
回到顶部组件
基于Vue2.6.12的回到顶部组件
安装
npm i pb-vue-scrolltotop
或
yarn add pb-vue-scrolltotop
基本使用
可通过Vue.use()
全局注册
import Vue from 'vue'
import PbScrolltotop from 'pb-vue-carousel'
Vue.use(PbScrolltotop)
也可在组件中局部引用
<template>
<div class="container">
<pb-scrolltotop></pb-scrolltotop>
</div>
</template>
<script>
import PbScrolltotop from 'pb-vue-scrolltotop'
export default {
components: {
PbScrolltotop
}
}
</script>
<style>
.container {
height: 2000px
}
</style>
可指定scroll 的目标元素
<template>
<div class="container">
app
<div id="test">
<div class="intest">
test
</div>
<scroll-totop
target="test"
>
</scroll-totop>
</div>
</div>
</template>
<script>
import ScrollTotop from 'pb-vue-scrolltotop'
export default {
components: {
ScrollToTop
}
}
</script>
<style>
.container {
height: 2000px;
}
#test {
height: 100px;
width: 200px;
border: 1px solid red;
overflow-y: auto;
}
.intest {
width: 100%;
height: 500px;
}
.scroll {
width: 20px;
height: 20px;
background: blue;
color: white;
}
</style>
这时候回到顶部的动作针对的是id为test的元素
可自定义scrolltotop的样式
<template>
<div class="container">
app
<scroll-totop
>
<div style="width:30px;height:30px;border-radius: 50%; background:#ffcccc; color: #fff; text-align:center; font-size: 14px">
UP
</div>
</scroll-totop>
</div>
</template>
<script>
import ScrollTotop from 'pb-vue-scrolltotop'
export default {
components: {
ScrollToTop
}
}
</script>
<style>
.container {
height: 2000px;
}
</style>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | -------------------------------------- | ------ | ------ | ------ | | right | 定位right值 | number | — | 0 | | bottom | 定位bottom值 | number | — | 0 | | visibleHeight | 滚动超过这个高度才会显示组件 | number | — | 200 | | target | 目标元素id,默认为空的情况下是document | string | — | "" |