bga-back-top-vue
基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可
效果图 Demo
基本使用
1.安装依赖
npm install --save bga-back-top-vue2.在入口 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。当然开发者也可以插入其他子组件
a.插入自定义 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>b.插入自定义图片
<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()关于我
| 新浪微博 | 个人主页 | 邮箱 | BGA系列开源库QQ群 |
|---|---|---|---|
| bingoogolapple | bingoogolapple.cn | bingoogolapple@gmail.com |
