Element Backtop回到顶部的具体使用


Posted in Javascript onJuly 27, 2020

组件— 回到顶部

基础用法

Element Backtop回到顶部的具体使用

<template>
 Scroll down to see the bottom-right button.
 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

自定义显示内容

Element Backtop回到顶部的具体使用

<template>
 Scroll down to see the bottom-right button.
 <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
 <div
  style="{
  height: 100%;
  width: 100%;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
  }"
 >
  UP
 </div>
 </el-backtop>
</template>

Attributes

Element Backtop回到顶部的具体使用Events

Element Backtop回到顶部的具体使用

关于element-ui el-backtop返回顶部组件无效问题

el-backtop绑定的盒子,需要一个滚动样式:overflow-y: scroll;

<template>
 <div id="app">
  <router-view />
  // 绑定app盒子
  <el-backtop target="#app" :visibility-height="100"></el-backtop>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {};
 },
 methods: {},
 mounted() {}
};
</script>

<style>
#app {
 font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 width: 100%;
 height: 100%;
 /* 这里给app一个滚动效果 */
 overflow-y: scroll;
}
</style>

到此这篇关于Element Backtop回到顶部的具体使用的文章就介绍到这了,更多相关Element Backtop回到顶部内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
javascript页面倒计时实例
Jul 25 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
You might like
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
为什么是 Python -m
2020/06/19 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python3实现简单飞机大战
2020/11/29 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
大学生四个方面的自我评价
2013/09/19 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
烹饪自我鉴定
2014/03/01 职场文书
优秀公益广告词大全
2014/03/19 职场文书
植树节标语
2014/06/27 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
单位接收证明格式
2015/06/18 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
python turtle绘图
2022/05/04 Python