关于ElementPlus框架Backtop组件的一些坑

Hangover · 发表于 2022-3-29 13:13:07

本帖最后由 Hangover 于 2022-3-29 13:55 编辑

先看看官网给出的一些栗子：Backtop 回到顶部

<template>
Scroll down to see the bottom-right button.
<el-backtop :right="100" :bottom="100" />
</template>

复制代码

<template>
Scroll down to see the bottom-right button.
<el-backtop :bottom="100">
<div style="
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: var(--el-box-shadow-lighter);
text-align: center;
line-height: 40px;
color: #1989fa;
">
UP
</div>
</el-backtop>
</template>

复制代码

看上去很简单，只需要一个el-backtop标签。

但事实真就如此？？？
先看下面的代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.1.0/dist/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus@2"></script>
<body>
<div id="app">
<div v-for="i in 500" :key="i">{{ i }}</div>
<el-backtop :right="100" :bottom="100"></el-backtop>
</div>
<script>
const app = Vue.createApp({});
app.use(ElementPlus);
app.mount("#app");
</script>
</body>

复制代码

运行发现没有效果，控制台也没出现报错信息

然后我就试着锁定次版本号与修订号，发现上面的代码在 2.1.4 版本下正常运行，而 https://cdn.jsdelivr.net/npm/element-plus@2 对应的是 2.x 最新版，也就是 2.1.6，
所以把ElementPlus的npm包版本号锁定为 2.1.4 即可正常使用Backtop组件。
返回顶部按钮：

但是如果想一直保持使用ElementPlus最新版怎么办？

解决办法：隐藏系统滚动条 > 为最外层元素显示滚动条 > Backtop组件绑定到显示滚动条的元素

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.1.0/dist/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus@2"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<style>
* {
margin: 0;
padding: 0;
}
/* 隐藏系统滚动条高度设定100% */
html,
body {
height: 100%;
overflow: hidden;
}
/* 外层容器显示滚动条 overflow为scroll或auto 高度设定100% */
#app {
height: 100%;
overflow: scroll;
}
/* 滚动条样式 */
#app::-webkit-scrollbar {
width: 10px;
}
#app::-webkit-scrollbar-track {
display: none;
}
#app::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #E8E8E8;
}
</style>
<body>
<div id="app">
<div v-for="i in 500" :key="i">{{ i }}</div>
<el-backtop target="#app" :visibility-height="300" :right="30" :bottom="30">
<i class="fas fa-arrow-alt-circle-up fa-2x"></i>
</el-backtop>
</div>
<script>
const app = Vue.createApp({});
app.use(ElementPlus);
app.mount("#app");
</script>
</body>

复制代码

运行发现一切正常~!
返回顶部按钮： QQ图片20220329130647.png

最后给大家来个油猴脚本的小栗子

// ==UserScript==
// @name 返回顶部-脚本猫
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @description try to take over the world!
// @author 张仨
// @match https://scriptcat.org/*
// @grant unsafeWindow
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js
// ==/UserScript==
unsafeWindow.Vue = Vue;
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://cdn.jsdelivr.net/npm/element-plus@2.1.4";
document.body.appendChild(script);
let myapp = document.createElement("div");
document.body.appendChild(myapp);
myapp.id = "my-app";
myapp.innerHTML = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2/dist/index.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<el-backtop :visibility-height="300" :right="30" :bottom="30">
<i class="fas fa-arrow-alt-circle-up fa-2x"></i>
</el-backtop>`
unsafeWindow.onload = function () {
const app = Vue.createApp({});
app.use(ElementPlus);
app.mount("#my-app");
}
GM_addStyle(`
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
display: none;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #E8E8E8;
}
`)

复制代码

完事~

王一之 · 发表于 2022-3-29 13:15:30

遮住id以为是李恒道

Hangover · 发表于 2022-3-29 13:17:50

王一之发表于 2022-3-29 13:15
遮住id以为是李恒道

代码丢失是什么鬼

Hangover · 发表于 2022-3-29 13:23:33

王一之发表于 2022-3-29 13:15
遮住id以为是李恒道

编辑器该换了

王一之 · 发表于 2022-3-29 13:25:09

Hangover 发表于 2022-3-29 13:23
编辑器该换了

哎我也很想吐槽但是没有找到合适的

李恒道 · 发表于 2022-3-29 13:48:47

王一之发表于 2022-3-29 13:15
遮住id以为是李恒道

当学院派才有意思！

Hangover · 发表于 2022-3-29 13:59:18

李恒道发表于 2022-3-29 13:48
当学院派才有意思！

这问题昨晚一晚上没弄明白...

李恒道 · 发表于 2022-3-29 14:13:29

Hangover 发表于 2022-3-29 13:59
这问题昨晚一晚上没弄明白...

其实可以单独翻一下那个组件的源码看差异
伴着调试
这样理解更深入一点

关于ElementPlus框架Backtop组件的一些坑

发表回复

荣誉开发者

油中2周年

生态建设者

管理员

喜迎中秋

油中3周年

挑战者 lv2