zhaozhinan / goTop

封装一款vue插件 -- 返回顶部插件

vue 组件 -- 返回顶部组件

[TOC]

概述

一款快捷返回顶部的 vue 插件，放置在页面右下角位置。

演示

DEMO

食用方法

1.下载安装

npm install vue-gotop --save

2.注册组件

首先需要注册组件。

import Vue from "vue";
import goTop from "vue-gotop";

Vue.use(goTop);

3.使用组件

接下来就可以使用啦

基础用法

默认位置距离页面右部和底部 30px，滚动至距顶端 400px 时显示。

<template>
  <go-top></go-top>
</template>
<script>
    export default {

    }
</script>

自定义用法

自定义了位置距离底部 200px，距离右侧 200px，滚动至距顶端 100px 时显示。点击组件时，触发clg方法，并且在 2s 内返回顶部。

<style scoped>
    .top{
        padding: 10px;
        background: rgba(0, 153, 229, .7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }
</style>
<template>
    <go-top :height="100" :bottom="200" :right="200" :duration="2000" @on-click="clg">
        <div class="top">返回顶端</div>
    </go-top>
</template>
<script>
    export default {
      methods: {
        clg() {
          console.log("object");
        }
      }
    }
</script>

API

props

属性	说明	类型	默认值
height	页面滚动高度达到该值时才显示goTop组件	Number	400
bottom	组件距离底部的距离	Number	30
right	组件距离右部的距离	Number	30
duration	滚动动画持续时间，单位 毫秒	Number	1000

events

事件名	说明	返回值
on-click	点击按钮时触发	无