如何将Vue.js桌面端自定义滚动条组件VScr改写为长尾词美化？

本文共计1587个文字，预计阅读时间需要7分钟。

前言

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

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

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

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

参数配置

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

◆ 引入组件

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