vuejs滚动条_Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

基于vue.js开发的小巧PC端自定义滚动条组件VScroll。

前段时间有给大家分享一个vue桌面端弹框组件，今天再分享最近开发的一个vue pc端自定义滚动条组件。

vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件。支持是否原生滚动条、鼠标移出是否自动隐藏、自定义滚动条尺寸及颜色等功能。

组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想。

通过简单的标签写法  ...  即可快速生成一个漂亮的替换原生滚动条。

参数配置

props: {//是否显示原生滚动条

native: Boolean,//是否自动隐藏滚动条

autohide: Boolean,//滚动条尺寸

size: { type: [Number, String], default: ''},//滚动条颜色

color: String,//滚动条层级

zIndex: null},

◆ 引入组件

在main.js中引入滚动条组件VScroll。

import VScroll from './components/vscroll'

Vue.use(VScroll)

◆ 快速使用

** 在使用前需要设置v-scroll外层div容器的宽度或高度。

这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！

这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！

◆ 实现过程

vscroll组件目录结构如下：