https://github.com/bingoogolapple/bga-back-top-vue
Vue-based back-top component 基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可
https://github.com/bingoogolapple/bga-back-top-vue
back-top vue vue-back-top
Last synced: 5 months ago
JSON representation
Vue-based back-top component 基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可
- Host: GitHub
- URL: https://github.com/bingoogolapple/bga-back-top-vue
- Owner: bingoogolapple
- Created: 2017-07-21T23:11:03.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-12-10T17:33:54.000Z (10 months ago)
- Last Synced: 2025-04-20T21:36:05.678Z (6 months ago)
- Topics: back-top, vue, vue-back-top
- Language: Vue
- Homepage:
- Size: 2.86 MB
- Stars: 29
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bga-back-top-vue
[ ](https://www.npmjs.com/package/bga-back-top-vue)
[](https://vuejs.org/)
[](https://github.com/apertureless/vue-parallax/blob/master/LICENSE.txt)
基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可
## 目录
* [效果图](#效果图)
* [基本使用](#基本使用)
* [属性说明](#属性说明)
* [高级用法](#高级用法)
* [关于我](#关于我)
* [打赏支持](#打赏支持)
## 效果图 [Demo](http://www.bingoogolapple.cn/bga-back-top-vue)
## 基本使用
> 1.安装依赖
```
npm install --save bga-back-top-vue
```
> 2.在入口 js 文件中导入。我这里是 main.js
```JavaScript
import BgaBackTop from 'bga-back-top-vue'
Vue.use(BgaBackTop)
```
> 3.在根组件中使用，整个项目只需要在根组件中添加一次即可。我这里是 App.vue
```html
```
> 4.为需要被滚动的标签添加「bga-back-top」样式
```html
have very long content 很长很长的内容{{ n }}
```
## 属性说明
#### 图片模式相关属性说明
属性名 | 说明 | 默认值
:----------- | :----------- | :-----------
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 状态时切换图片
```
// BgaBackTop 普通状态和鼠标悬停状态时的图片样式
.bga-back-top-img {
content: url("/assets/bga-back-top-normal.png");
&:hover {
content: url("/assets/bga-back-top-hover.png");
}
}
```
#### 2.通过 slot 插桩的方式定制 BgaBackTop 的内容，如果为其添加了子组件则不会显示默认样式。下面演示插入自定义 SVG 和 img。当然开发者也可以插入其他子组件
> 插入自定义 SVG。可以到 [阿里巴巴矢量图标库](http://www.iconfont.cn) 中下载 SVG
```
```
> 插入自定义图片
```
![]()
// BgaBackTop 普通状态和鼠标悬停状态时的图片样式
.bga-back-top-img {
content: url("/assets/bga-back-top-normal.png");
&:hover {
content: url("/assets/bga-back-top-hover.png");
}
}
```
#### 3.可以在任意的 Vue 组件中通过 JavaScript 代码主动触发可滚动组件滚动到顶部。应用场景：滚动一定距离后重新加载了网络数据，加载完数据后将可滚动组件滚动到顶部
```JavaScript
// 在 BgaBackTop 内部已经为 Vue.prototype 添加了全局方法 $bgaBackTop，因此在 Vue 实例中可以直接通过 this.$bgaBackTop() 来调用该方法
this.$bgaBackTop()
```
## 作者联系方式
| 个人主页 | 邮箱 |
| ------------- | ------------ |
| bingoogolapple.cn | bingoogolapple@gmail.com |
| 个人微信号 | 微信群 | 公众号 |
| ------------ | ------------ | ------------ |
| 
| 
| 
|
| 个人 QQ 号 | QQ 群 |
| ------------ | ------------ |
| 
| 
|
## 打赏支持作者
如果您觉得 BGA 系列开源库或工具软件帮您节省了大量的开发时间，可以扫描下方的二维码打赏支持。您的支持将鼓励我继续创作，打赏后还可以加我微信免费开通一年 [上帝小助手浏览器扩展/插件开发平台](https://github.com/bingoogolapple/bga-god-assistant-config) 的会员服务
| 微信 | QQ | 支付宝 |
| ------------- | ------------- | ------------- |
| 
| 
| 
|
## 作者项目推荐
* 欢迎您使用我开发的第一个独立开发软件产品 [上帝小助手浏览器扩展/插件开发平台](https://github.com/bingoogolapple/bga-god-assistant-config)
## License
[MIT](http://opensource.org/licenses/MIT)