关于ElementPlus框架Backtop组件的一些坑
本帖最后由 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>
<!-- Font Awesome 图标库 -->
<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>
运行发现一切正常~!
返回顶部按钮：
最后给大家来个油猴脚本的小栗子
// ==UserScript==
// @name 返回顶部-脚本猫
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry 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;
}
`)
完事~
遮住id以为是李恒道 王一之 发表于 2022-3-29 13:15
遮住id以为是李恒道
代码丢失是什么鬼{:4_89:} 王一之 发表于 2022-3-29 13:15
遮住id以为是李恒道
编辑器该换了{:4_88:} Hangover 发表于 2022-3-29 13:23
编辑器该换了
哎 我也很想吐槽 但是没有找到合适的 王一之 发表于 2022-3-29 13:15
遮住id以为是李恒道
当学院派才有意思！ 李恒道 发表于 2022-3-29 13:48
当学院派才有意思！
这问题昨晚一晚上没弄明白... Hangover 发表于 2022-3-29 13:59
这问题昨晚一晚上没弄明白...
其实可以单独翻一下那个组件的源码看差异
伴着调试
这样理解更深入一点
页:
[1]