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

关于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;
    }
`)
完事~



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

遮住id以为是李恒道

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

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

代码丢失是什么鬼{:4_89:}

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

王一之 发表于 2022-3-29 13:15
遮住id以为是李恒道
编辑器该换了{:4_88:}

王一之 发表于 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
这问题昨晚一晚上没弄明白...

其实可以单独翻一下那个组件的源码看差异
伴着调试
这样理解更深入一点
页: [1]
查看完整版本: 关于ElementPlus框架Backtop组件的一些坑