Skip to content
/ goTop Public

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

Notifications You must be signed in to change notification settings

Mrcxt/goTop

Repository files navigation

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 点击按钮时触发

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published