/bga-back-top-vue

Vue-based back-top component 基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可

Primary LanguageVue

bga-back-top-vue

npm npm vue2 license

基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可

目录

效果图 Demo

bga-back-top

基本使用

1.安装依赖

npm install --save bga-back-top-vue

2.在入口 js 文件中导入。我这里是 main.js

import BgaBackTop from 'bga-back-top-vue'
Vue.use(BgaBackTop)

3.在根组件中使用，整个项目只需要在根组件中添加一次即可。我这里是 App.vue

<template>
  <div>
    <left-layout/>
    <router-view/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-back-top :threshold="150" :right="160" :bottom="60" :width="40" :height="40" :svgMajorColor="'#7b79e5'"
                 :svgMinorColor="'#ba6fda'" :svgType="'rocket'"/>
  </div>
</template>

4.为需要被滚动的标签添加「bga-back-top」样式

<template>
  <div class="demo1-container">
    <!-- 该标签里有很长很长的内容，为其添加滚动到顶部的功能，添加「bga-back-top」样式 -->
    <div class="have-very-long-content bga-back-top">
      <h2 v-for="n in 30">have very long content 很长很长的内容{{ n }} </h2>
    </div>
  </div>
</template>

属性说明

图片模式相关属性说明

属性名 说明 默认值
imgUrl BgaBackTop 为图片模式时图片的 url，如果设置了该属性，则会忽略 svg 开头的相关属性 null
imgCss BgaBackTop 为图片模式时图片的样式，如果设置了该属性，则会忽略 svg 开头的相关属性 null

SVG 模式相关属性说明

属性名 说明 默认值
svgMajorColor BgaBackTop 为 SVG 模式时的主要颜色 #bfbfbf
svgMinorColor BgaBackTop 为 SVG 模式时的次要颜色 #bfbfbf
svgType SVG 模式的样式类型，包括 circle_border_arrow、circle_fill_arrow、rocket_smoke、rocket rocket

公共属性说明

属性名 说明 默认值
right BgaBackTop 右边缘离浏览器右边缘的距离，单位为 px，但是开发者只需要写数字就行 30
bottom BgaBackTop 下边缘离浏览器下边缘的距离，单位为 px，但是开发者只需要写数字就行 60
width BgaBackTop 宽度，单位为 px，但是开发者只需要写数字就行 48
height BgaBackTop 高度，单位为 px，但是开发者只需要写数字就行 48
threshold 可滚动控件滚动偏移多少后才显示 BgaBackTop，必须大于 100 150
animationTime 可滚动控件滚动到顶部的动画时间，单位为毫秒，100 到 200 之间 150

高级用法

1.通过设置 imgCss 属性设置样式来支持鼠标 hover 状态时切换图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-back-top :threshold="150" :right="560" :bottom="60" :width="40" :height="40" :imgCss="'bga-back-top-img'"/>
  </div>
</template>
<style lang="scss">
  // BgaBackTop 普通状态和鼠标悬停状态时的图片样式
  .bga-back-top-img {
    content: url("/assets/bga-back-top-normal.png");
    &:hover {
      content: url("/assets/bga-back-top-hover.png");
    }
  }
</style>

2.通过 slot 插桩的方式定制 BgaBackTop 的内容，如果为其添加了子组件则不会显示默认样式。下面演示插入自定义 SVG 和 img。当然开发者也可以插入其他子组件

插入自定义 SVG。可以到 阿里巴巴矢量图标库 中下载 SVG

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-back-top :threshold="150" :right="80" :bottom="60" :width="40" :height="40">
      <svg width="40" height="40" viewBox="0 0 1024 1024">
        <!-- 火箭外形 -->
        <path fill="#7b79e5"
              d="M960 768l-128-73.12c0-64.432 0-128.752 0-182.88 0-192-128-384-320-512C320 128 192 320 192 512c0 54.128 0 118.432 0 182.88L64 768c-38.816 20.32-64 47.632-64 83.008L0 960c0 35.376 28.624 64 64 64l896 0c35.376 0 64-28.624 64-64l0-108.992C1024 815.632 994 790 960 768zM896 896 128 896l0-17.12 192-109.68L320 512c0-119.936 71.872-249.376 192-351.872C632.128 262.624 704 392.064 704 512l0 257.184 189.184 108.064c0.992 0.624 1.936 1.248 2.816 1.872L896 896z"
              p-id="5019"/>
        <!-- 中间圆点 -->
        <path fill="#ba6fda" d="M512 448m-64 0a4 4 0 1 0 128 0 4 4 0 1 0-128 0Z" p-id="5020"/>
      </svg>
    </bga-back-top>
  </div>
</template>

插入自定义图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只需要在这里添加一次即可 -->
    <bga-back-top :threshold="150" :right="480" :bottom="60" :width="40" :height="40">
      <img class="bga-back-top-img" style="width: 100%; height: 100%;"/>
    </bga-back-top>
  </div>
</template>
<style lang="scss">
  // BgaBackTop 普通状态和鼠标悬停状态时的图片样式
  .bga-back-top-img {
    content: url("/assets/bga-back-top-normal.png");
    &:hover {
      content: url("/assets/bga-back-top-hover.png");
    }
  }
</style>

3.可以在任意的 Vue 组件中通过 JavaScript 代码主动触发可滚动组件滚动到顶部。应用场景：滚动一定距离后重新加载了网络数据，加载完数据后将可滚动组件滚动到顶部

// 在 BgaBackTop 内部已经为 Vue.prototype 添加了全局方法 $bgaBackTop，因此在 Vue 实例中可以直接通过 this.$bgaBackTop() 来调用该方法
this.$bgaBackTop()

作者联系方式

个人主页 邮箱
bingoogolapple.cn bingoogolapple@gmail.com
个人微信号 微信群 公众号
个人微信号 微信群 公众号
个人 QQ 号 QQ 群
个人 QQ 号 QQ 群

打赏支持作者

如果您觉得 BGA 系列开源库或工具软件帮您节省了大量的开发时间，可以扫描下方的二维码打赏支持。您的支持将鼓励我继续创作，打赏后还可以加我微信免费开通一年 上帝小助手浏览器扩展/插件开发平台 的会员服务

微信 QQ 支付宝
微信 QQ 支付宝

作者项目推荐

License

MIT