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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
Element Dialog对话框的使用示例
Jul 26 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
解决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获取MSN好友列表类的实现代码
2013/06/23 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python实现换位加密算法的示例
2018/10/14 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
小学学校评估方案
2014/06/08 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
学生通报表扬范文
2015/05/04 职场文书
聘任书范文大全
2015/09/21 职场文书
入党申请书怎么写?
2019/06/21 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书