pb-vue-scrolltotop v0.0.4

回到顶部组件

基于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