go>> easy-go-top>> 返回
项目作者： dream2023

项目描述 ：
easy-go-top | 简单 & 强大的 vue 回到顶部组件
高级语言： JavaScript
项目地址: git://github.com/dream2023/easy-go-top.git


easy-go-top | 简单 & 强大的 vue 回到顶部组件

MIT Licence
npm
size
download

介绍

目前 GitHub 上已有不少回到顶部的组件, 但是要不然是可定制化不够, 要不然就是不够简单, 所以就像写一个即能很简单, 但同时很强大的回到顶部的 vue 组件, 根据场景不同, easy-go-top 组件用于以下特性:

  • 支持全局引入, 并设置全局参数, 使用时无需重复传参
  • 支持 js 回到顶部(用于加载数据后, 回到顶部等场景)
  • 支持 css 和 js 两种样式覆盖形式, 定制化更容易

效果图

演示图

文档和示例

https://dream2023.github.io/easy-go-top/

安装

  1. npm install easy-go-top --save

使用

  1. // 全局引入(推荐)
  2. import EasyGoTop from 'easy-go-top'
  3. Vue.use(EasyGoTop)
  1. // 全局引入定制化
  2. Vue.use(EasyGoTop, {
  3.   size: 52,
  4.   color: '#9aaabf',
  5.   backgroundColor: 'rgb(231, 234, 241)',
  6.   innerHTML: '<svg viewBox="0 0 17 17"><g><path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"></path></g></svg>'
  7.   ... // 全部参数参考props参数
  8. })
  1. // 局部引入
  2. import { EasyGoTop, easyGoTopMixin } from 'easy-go-top/src/index'
  3. export default {
  4.   components: {
  5.     EasyGoTop
  6.   },
  7.   // 如果需要使用js触发回到顶部, 则需要引入mixin, 否则不需要
  8.   minxins: [easyGoTopMixin]
  9. }

示例

最简单的使用

  1. <!-- 最简单的使用: 如果想要使用默认参数 或者 全局设置了参数, 使用组件即可 -->
  2. <easy-go-top ></easy-go-top>

定制化

  1. <!-- 定制化: 局部引入, 或者全局引入后未设置参数, 想要定制化, 则需要指定参数 -->
  2. <easy-go-top :size="52" color="#9aaabf" backgroundColor="rgb(231, 234, 241)" ></easy-go-top>

js 调用

  1. // 全局引入, 直接调用, 局部引入时, 记得要手动注册mixin
  2. this.$goTop()

支持插槽

  1. <easy-go-top><i class="iconfont icon-rocket"></i></easy-go-top>

样式覆盖

js 进行样式覆盖

  1. // 全局引入时
  2. Vue.use(EasyGoTop, {
  3.   customStyle: {
  4.     boxShadow: 'none'
  5.   }
  6. })
  1. <!-- 或使用时 -->
  2. <easy-go-top :customStyle="{ boxShadow: 'none' }" ></easy-go-top>

css 样式覆盖

  1. #easy-go-top {
  2.   box-shadow: none;
  3.   /* 如果不行, 则试试, box-shadow: none !important */
  4. }

Props 参数

特别说明, innerHTML 参数, 不仅可以传递文本等, 还可以传递例如 svg 或者 iconfont 的 i 标签等 HTML

  1. props: {
  2.   // 大小: 如果未赋值 width 和 height, 则 width = size, height = size,
  3.   // 如果赋值了 width 或 height, 会覆盖 size 的 值
  4.   size: {
  5.     type: Number,
  6.     default: 50
  7.   },
  8.   // 宽度: 当定义 width 时, 会覆盖 size 值
  9.   width: {
  10.     type: Number
  11.   },
  12.   // 高度: 当定义 height 时, 会覆盖 size 值
  13.   height: {
  14.     type: Number
  15.   },
  16.   // 字体颜色
  17.   color: {
  18.     type: String,
  19.     default: '#fff'
  20.   },
  21.   // 圆角
  22.   radius: {
  23.     type: Number,
  24.     default: 50
  25.   },
  26.   // z-index值
  27.   zIndex: {
  28.     type: Number,
  29.     default: 10
  30.   },
  31.   // 绝对定位: 距离右侧距离
  32.   right: {
  33.     type: Number,
  34.     default: 20
  35.   },
  36.   // 绝对定位: 距离底部距离
  37.   bottom: {
  38.     type: Number,
  39.     default: 40
  40.   },
  41.   // 内容: 可以传递svg 和 iconfont等
  42.   innerHTML: {
  43.     type: String,
  44.     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>'
  45.   },
  46.   // 背景色
  47.   backgroundColor: {
  48.     type: String,
  49.     default: '#000'
  50.   },
  51.   // 可见高度: 即滚动距离顶部多高时显示组件
  52.   visibilityHeight: {
  53.     type: Number,
  54.     default: 400
  55.   },
  56.   // 自定义样式
  57.   customStyle: {
  58.     type: Object
  59.   }
  60. }

参考链接