Vue.js组件 滚动到页面顶部按钮 - vue-go-top

Vue.js组件 滚动到页面顶部按钮 - vue-go-top
插件名称 vue-go-top
发布时间 2020年5月21日
插件作者 inotom

可自定义的Vue组件,滚动到Web应用程序上的页面顶部按钮。

安装和下载:

# NPM
$ npm install @inotom/vue-go-top --save

使用:

浏览器

<div id="app">
<go-top></go-top>
</div>
<script src="vue.js"></script>
<script src="vue-go-top.min.js"></script>
<script>
Vue.use(GoTop);
new Vue({
el: '#app'
});
</script>

SFC

<template>
  <go-top></go-top>
  </template>
<script>
  import GoTop from '@inotom/vue-go-top';
export default {
  components: {
  GoTop
  }
  }
  </script>

Props:

名称 类型 默认值 描述
:size Number 70 宽度/高度像素大小
:right StringNumber 50 右边距
:bottom StringNumber 100 底边距
:bottom-gap StringNumber 0 底边距
:z-index Number 1000 z-index 索引大小
fg-color String #ffffff 文字颜色
bg-color String #ffc966 背景颜色
:radius StringNumber 50% border-radius 半径大小
weight String normal 箭头线宽
ripple-bg String rgba(255, 255, 255, .5) 涟漪动画颜色
:boundary Number 200 元素显示的最高位置
:max-width Number 640 媒体查询最大宽度(px)
src String null 图片网址
alt String 图片的替代文字
:has-outline Boolean true 聚焦时显示轮廓
box-shadow String 1px 1px 2px rgba(0, 0, 0, .3) 框影属性
:tabindex Number 0 tabindex属性