模仿 Element-UI 框架 el-scrollbar 组件

最新推荐文章于 2024-09-23 12:22:55 发布

雨穆笙

最新推荐文章于 2024-09-23 12:22:55 发布

阅读量358

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45311714/article/details/134165362

版权

前言

我们在 Element-UI 的其他组件里发现，有使用这个组件，并且还不错，由于 Element-UI 官方文档并没有写到关于 el-scrollbar 的文档，所以稳定性上可能是有些问题。

于是只好自己写了一个类似于 el-scrollbar 功能的组件。

示例：

首先，需要创建一个 Vue 组件，该组件将包含包裹容器、内容容器和滚动条，然后监听滚动事件并处理用户交互。

<template>
  <div class="el-scrollbar">
    <div class="el-scrollbar__wrap" ref="wrap" @scroll="handleScroll">
      <div class="el-scrollbar__content" :style="{ 'margin-right': verticalScrollbarWidth + 'px' }">
        <!-- Your content goes here -->
      </div>
    </div>
    <div class="el-scrollbar__bar" v-show="vBarVisible" ref="bar" @mousedown="startDrag">
      <div class="el-scrollbar__thumb" ref="thumb" :st