Vue3.0自定义滚动条组件|vue3模拟滚动条v3-scroll

介绍

vue3.0-scroll 一款基于vue3.x开发的pc桌面端虚拟滚动条组件。拥有简便的调用方式，支持自定义滚动条尺寸、颜色、层叠及是否自动隐藏滚动条等功能。

v3scroll支持水平+垂直滚动条。

配置 :native="true" 则会显示默认系统滚动条。

配置 :autohide="true" 鼠标移开则会自动隐藏滚动条。

快速引入

在 main.js 中全局引入v3scroll组件。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
 
// 引入滚动条组件v3scroll
import V3Scroll from './components/v3scroll'
 
createApp(App).use(V3Scroll).mount('#app')

使用组件

使用 包裹住内容块即可快速生成一个虚拟滚动条组件。

    
显示自定义内容！

 


    
显示自定义内容！

vue3.0 监听元素/DOM尺寸改变，动态更新滚动条组件。

开发实现

• 参数配置

v3scroll支持如下参数自定义配置。

props: {
    // 是否显示原生滚动条
    native: Boolean,
    // 是否自动隐藏滚动条
    autohide: Boolean,
    // 滚动条尺寸
    size: { type: [Number, String], default: '' },
    // 滚动条颜色
    color: String,
    // 滚动条层级
    zIndex: null
},

• v3scroll组件模板

• v3scroll的主要逻辑处理 (Vue3语法)

/**
 * @Desc     Vue3.x美化滚动条组件V3Scroll
 * @Time     andy by 2021-01
 * @About    Q：282310962  wx：xy190310
 */

好了，基于vue3实现PC网页版自定义滚动条组件就分享这么多。希望对大家有所帮助哈！

最后附上一个Vue3自定义弹窗组件。
vue3.0自定义桌面端弹窗组件|vue3仿layer对话框v3layer