easy-go-top | 简单 & 强大的 vue 回到顶部组件
介绍
目前 GitHub 上已有不少回到顶部的组件, 但是要不然是可定制化不够, 要不然就是不够简单, 所以就像写一个即能很简单, 但同时很强大的回到顶部的 vue 组件, 根据场景不同, easy-go-top 组件用于以下特性:
- 支持全局引入, 并设置全局参数, 使用时无需重复传参
- 支持 js 回到顶部(用于加载数据后, 回到顶部等场景)
- 支持 css 和 js 两种样式覆盖形式, 定制化更容易
效果图
文档和示例
https://dream2023.github.io/easy-go-top/
安装
npm install easy-go-top --save
使用
// 全局引入(推荐)Vue
// 全局引入定制化Vue
// 局部引入 components: EasyGoTop // 如果需要使用js触发回到顶部, 则需要引入mixin, 否则不需要 minxins: easyGoTopMixin
示例
最简单的使用
<!-- 最简单的使用: 如果想要使用默认参数 或者 全局设置了参数, 使用组件即可 -->
定制化
<!-- 定制化: 局部引入, 或者全局引入后未设置参数, 想要定制化, 则需要指定参数 -->
js 调用
// 全局引入, 直接调用, 局部引入时, 记得要手动注册mixinthis
支持插槽
样式覆盖
js 进行样式覆盖
// 全局引入时Vue
<!-- 或使用时 -->
css 样式覆盖
Props 参数
特别说明, innerHTML 参数, 不仅可以传递文本等, 还可以传递例如 svg 或者 iconfont 的 i 标签等 HTML
props: // 大小: 如果未赋值 width 和 height, 则 width = size, height = size, // 如果赋值了 width 或 height, 会覆盖 size 的 值 size: type: Number default: 50 // 宽度: 当定义 width 时, 会覆盖 size 值 width: type: Number // 高度: 当定义 height 时, 会覆盖 size 值 height: type: Number // 字体颜色 color: type: String default: '#fff' // 圆角 radius: type: Number default: 50 // z-index值 zIndex: type: Number default: 10 // 绝对定位: 距离右侧距离 right: type: Number default: 20 // 绝对定位: 距离底部距离 bottom: type: Number default: 40 // 内容: 可以传递svg 和 iconfont等 innerHTML: type: String default: '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>' // 背景色 backgroundColor: type: String default: '#000' // 可见高度: 即滚动距离顶部多高时显示组件 visibilityHeight: type: Number default: 400 // 自定义样式 customStyle: type: Object