欢迎大家来到IT世界,在知识的湖畔探索吧!
一、前言
elementUI有说明文档,但我为什么还要重新写一下呢?因为文档也有坑,一开始使用时你复制进去,可能都没有效果。也不知道原因在哪,就如Backtop回到顶部的组件,不去看源码,真心不知道是怎么个所以然。一开始,我把这个组件放到我页面的底部,结果是无效果的,而且还会报css的这两个样式错误(.page-component__scroll .el-scrollbar__wrap),看完这个文档,也没找到这两个是什么东西,在哪设置。全文搜索,也没找到这两个css。最后逼我进去看Backtop组件源码,看懂后,删除了没必要的东西,放置的位置调整一下,完美解决。这也是本站使用的回到顶部的效果。以下我会贴出官方文档及源码,还有解决思路
二、官方文档 https://element.eleme.cn/#/zh-CN/component/backtop
Backtop 回到顶部
返回页面顶部的操作按钮
基础用法
滑动页面即可看到右下方的按钮。
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template>
欢迎大家来到IT世界,在知识的湖畔探索吧!
自定义显示内容
显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。
欢迎大家来到IT世界,在知识的湖畔探索吧!<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>
如果没试过的可以先跟着官方的文档试下,看是否可行,若不可行,接着往下看
三、el-backtop组件源码
<template> <transition name="el-fade-in"> <div v-if="visible" @click.stop="handleClick" :style="{ 'right': styleRight, 'bottom': styleBottom }" class="el-backtop"> <slot> <el-icon name="caret-top"></el-icon> </slot> </div> </transition> </template> <script> import throttle from 'throttle-debounce/throttle'; export default { name: 'ElBacktop', props: { visibilityHeight: { type: Number, default: 200 }, target: [String], right: { type: Number, default: 40 }, bottom: { type: Number, default: 40 } }, data() { return { el: null, container: null, visible: false }; }, computed: { styleBottom() { return `${this.bottom}px`; }, styleRight() { return `${this.right}px`; } }, mounted() { this.init(); this.throttledScrollHandler = throttle(300, this.onScroll); this.container.addEventListener('scroll', this.throttledScrollHandler); }, methods: { init() { this.container = document; this.el = document.documentElement; if (this.target) { this.el = document.querySelector(this.target); if (!this.el) { throw new Error(`target is not existed: ${this.target}`); } this.container = this.el; } }, onScroll() { const scrollTop = this.el.scrollTop; this.visible = scrollTop >= this.visibilityHeight; }, handleClick(e) { this.scrollToTop(); this.$emit('click', e); }, scrollToTop() { let el = this.el; let step = 0; let interval = setInterval(() => { if (el.scrollTop <= 0) { clearInterval(interval); return; } step += 10; el.scrollTop -= step; }, 20); } }, beforeDestroy() { this.container.removeEventListener('scroll', this.throttledScrollHandler); } }; </script>
组件的几个参数:
- visibility-height:滚动高度达到此参数值才出现,默认200,是number类型(使用如:visibility-height=”100″)
- target:触发滚动的对象,是String类型,你可以不传
- right:控制其显示位置, 距离页面右边距,默认40,是number类型,数值越大,离右边越远。
- bottom:控制其显示位置, 距离页面底部距离。默认40,是number类型,你可以调整他的值,越大离底部越远。
三、思路
当你看完backtop的组件源码后,你是否会有所领悟呢?他的组件参数都有默认值,这意思就是,我们可以什么都不传,调用这个组件即可使用。
欢迎大家来到IT世界,在知识的湖畔探索吧!<el-backtop></el-backtop>
是的,你没看错,把上面那段代码Copy到你的代码中,即可使用。记得把代码放在最外层的div里的第一个,不要放在尾部。
<div style="width: 100%;height: 100%;"> <el-backtop :bottom="60"></el-backtop> <div>
到此结束,这个组件,百度也得不到结果,能解决的只有你自己,要么放弃使用这个组件,要么就搞懂它,然后研究使用,当你知道它的原理,所有问题都不再是问题。这也是建议大家多看源码的理由之一。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/48754.html