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

[TOC]

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

DEMO

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