介绍

这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部。

使用方法

由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹BackToTop导入到现有项目中即可使用。

使用示例

<template>
<div id="app">
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示,可在外部添加element的<el-tooltip></el-tooltip>元素 -->
<el-tooltip placement="top" content="回到顶部">
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/>
</el-tooltip>
</div>
</div>
</template> <script>
import BackToTop from './BackToTop'
export default {
name: 'app',
components: { BackToTop},
data() {
return {
myBackToTopStyle: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
borderRadius: '4px',
lineHeight: '45px', // 请保持与高度一致以垂直居中
background: '#e7eaf1'// 按钮的背景颜色
}
}
}
}
</script>

选项

属性 描述 类型 是否必须 默认值
visibilityHeight 当页面卷曲到多少高度时显示按钮 Number 400
backPosition 点击按钮后回到页面顶部的高度 Number 0
customStyle 自定义按钮样式 Object
transitionName 回到顶部时的动画效果,具体参考elementUI的动画效果 String fade

效果图

组件代码

完整代码请戳☞Vue-Components-Library/BackToTop

(完)

Vue+element UI实现“回到顶部”按钮组件的更多相关文章

  1. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  2. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  3. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  4. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  5. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  7. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  8. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. Inkscape 旋转并复制

    画一个图形,点击图标. 然后图标中心有个十字叉, 然后把这个十字叉拖到你想要旋转的地方. 然后shift+ctrl+m打开变换菜单. 选择旋转选项卡,然后设置角度,点击应用.就可以旋转了,如果配合ct ...

  2. mysql 分页offset过大性能问题解决思路

    在公司干活一般使用sqlserver数据库.rownumber分页贼好用. 但是晚上下班搞自己的事情就不用sqlserver了.原因就是自己的渣渣1核2g的小服务器完全扛不住sqlserver那么大的 ...

  3. SpringBoot源码分析之---SpringBoot项目启动类SpringApplication浅析

    源码版本说明 本文源码采用版本为SpringBoot 2.1.0BUILD,对应的SpringFramework 5.1.0.RC1 注意:本文只是从整体上梳理流程,不做具体深入分析 SpringBo ...

  4. 洛谷 P2145 [JSOI2007]祖码

    题目描述 这是一个流行在Jsoi的游戏,名称为祖玛. 精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青蛙,石青蛙会 ...

  5. SQL 存储过程示例讲解

    create proc score_result ) --参数 as declare --定义变量@courseNo int, @testTime1 datetime, @avg int begin ...

  6. RAID 10 配置流程

    1.在虚拟机中再添加5块硬盘: 2.fdisk -l 可以查看当前虚拟机中的磁盘情况. 3.使用mdadm命令创建RAID10,名称为”/dev/md0″. -C代表创建操作,-v显示创建过程,-a ...

  7. unittest介绍

    unittest框架是python中一个标准的库中的一个模块,该模块包括许多的类如 test case类.test suit类.texttest runner类.texttest resuite类.t ...

  8. Python_函数做字典的值

    当需要用到3个及以上的if...elif...else时就要考虑该方法进行简化 通过将函数名称当做字典的值,利用字典的关键字查询,可以快速定位函数,进行执行 [场景]用户查询信息,输入fn查询,执行对 ...

  9. Unix 线程共享创建进程打开的文件资源(1)

    执行环境:Linux ubuntu 4.4.0-31-generic #50-Ubuntu SMP Wed Jul 13 00:07:12 UTC 2016 x86_64 x86_64 x86_64 ...

  10. JavaScript正则表达式之语法

    Regular Expressions翻译成中文叫正则表达式.也不知道是谁翻译过来的,听起来就很严肃.似乎翻译成通用表达式更能传达其精髓. 为什么叫通用表达式?因为它有一套和编程语言无关的文本匹配规则 ...