vue 滚动条组件,vue修改滚动条样式
本文主要介绍了关于Vue.js桌面自定义滚动条组件VScroll的美化的相关信息，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
前言
前段时间给大家分享了一个vue桌面弹出框组件。今天分享一个最近开发的vue pc自定义滚动条组件。
Vscroll是基于vue2.x支持滚动条是否原生、鼠标移出时是否自动隐藏、自定义滚动条大小和颜色等功能，在web端开发的轻量级超紧凑定制美化滚动条组件。
在组件设计开发之初，借鉴了el-scrollbar、vuebar等组件设计思想。
只需简单地编写标签v-scroll，就可以快速生成一个漂亮的替代性原生滚动条./v-scroll
参数配置
道具：{
//是否显示本机滚动条
本机：布尔型，
//是否自动隐藏滚动条
autohide: Boolean，
//滚动条大小
大小：{ type:[数字，字符串]，默认值： }，
//滚动条颜色
颜色：字符串，
//滚动条层次结构
zIndex:空
},
引入组件
介绍main.js中的滚动条组件VSCROL
从“”导入VScroll。/components/vscroll
Vue.use(虚拟滚动)
快速使用
* *在使用v-scroll外部div容器之前，您需要设置它的宽度或高度。
！-设置本机滚动条-
v-scroll本机
img src= https://cn . vue js . org/images/logo . png style= max-width:100%；/
p这里是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！/p
/v滚动
！-设置自定义参数-
v-scroll自动隐藏size= 10 color= # f90 zIndex= 2020
img src= https://cn . vue js . org/images/logo . png style= max-width:100%；/
p这里是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！以下是内容信息！/p
/v滚动
实现过程
vscroll组件目录结构如下：
！-//vscroll自定义滚动条模板-
模板
div class= vui _ _ scroll bar ref= ref _ _ box @ mouse enter= handle mouse enter @ mouse leave= handle mouse leave v-resize= handle resize
div :class=[vscroll__wrap ，{ native:native }] ref= ref _ _ wrap @ scroll= handle scroll
div class= vscroll _ _ view v-resize= handle resize
插槽/
/div
/div
！-//滚动条-
div:class=[ vscroll _ _ bar vertical ，{ ishide:isShow }] @ mousedown= handle click track($ event，0):style= { width :parse int(size)=0？parseInt(size) px : ， z-index: parseInt(zIndex)=0？parseInt(zIndex) : }
div class= vscroll _ _ thumb ref= ref _ _ barY :style= { background :color， height :bar height px } @ mousedown= handledragsthumb($ event，0)/div
/div
div:class=[ vscroll _ _ bar horizontal ，{ishide:isShow }] @ mousedown= handle click track($ event，1):style= { height :parse int(size)=0？parseInt(size) px : ， z-index: parseInt(zIndex)=0？parseInt(zIndex) : }
div class= vscroll _ _ thumb ref= ref _ _ barX :style= { background :color， width :bar width px } @ mousedown= handledragsthumb($ event，1)/div
/div
/div
/模板
如何在vue中通过指令directtive函数来监控元素/DOM大小变化？
很简单，写个轮询自定义指令就行了。在这里，我们直接监控滚动区DOM的宽度/高度变化来动态更新滚动条状态。
//侦听元素/DOM大小的更改
指令：{
调整“:”的大小
bind:函数(el，binding) {
设宽度=“”，高度=“”；
函数get() {
const elStyle=el.currentStyle？El . current style:document . default view . getcomputedstyle(El，null)；
如果(宽度！==elStyle.width height！==elStyle.height) {
binding.value({width，height })；
}
width=elStyle.width
height=elStyle.height
}
埃尔。__vueReize__=setInterval(get，16)；
},
解除绑定：函数(el) {
clearInterval(el。_ _ vueReize _ _)；
}
}
},
/**
* @Desc vue.js自定义滚动条直接VScroll
* @时间安迪到2020-11-30
* @关于Q:282310962 wx:xy190310
*/
脚本
从导入多穆蒂尔斯./utils/dom
导出默认值{
道具：{
//是否显示原生滚动条
本机：布尔型，
//是否自动隐藏滚动条
autohide: Boolean，
//滚动条尺寸
大小：{类型：[数字，字符串],默认值： },
//滚动条颜色
颜色：字符串，
//滚动条层级
zIndex:空
},
data() {
返回{
barWidth: 0，//滚动条宽度
barHeight: 0，//滚动条高度
比率X: 1，//滚动条水平偏移率
比率：1,//滚动条垂直偏移率
isTaped: false，//鼠标光标是否按住滚动条
isHover: false，//鼠标光标是否悬停在滚动区
isShow:this.autohide，//是否显示滚动条
}
},
已安装(){
这个. $ref__box=this .$refs.ref__box
这个. $ref__wrap=this .$refs.ref__wrap
这个. ref__barY=this .$refs.ref__barY
这个. $ref__barX=this .$refs.ref__barX
这个. nextTick(this.updated)
},
//.
方法：{
//鼠标移入
handleMouseEnter() {
这个。结束=真
this.isShow=true
this.updated()
},
//鼠标移出
handleMouseLeave() {
这个。结束=错误
this.isShow=false
},
//拖动滚动条
handledraggthumb(e，index) {
让这个=这个
this.isTaped=true
设c={}
//阻止默认事件
domUtils.isIE()？(e.returnValue=false，e . cancel bubble=true):(e . stop propagation()，e.preventDefault())
文档。onselectstart=()=false
if(index==0) {
c.dragY=true
客户关系=客户关系
}否则{
c.dragX=true
客户X=客户e
}
domUtils.on(文档，鼠标移动，函数(evt) {
if(_this.isTaped) {
if(c.dragY) {
_这个$ ref _ _ wrap。scroll top=(evt。clienty-c . clienty)* _ this。比例
_这个2007年12月15日，ref _ _ Bary。风格。transform=` translate y($ { _ this .$ ref _ _ wrap。向上滚动/_ this。ratioy } px)`
客户关系
}
if(c.dragX) {
_这个$ ref _ _ wrap。向左滚动=(evt。clientx-c . clientx)* _ this。ratix
_这个$ ref _ _ barx。风格。transform=` translate x($ { _ this .$ ref _ _ wrap。向左滚动/_ this。比率x } px)`
c.clientX=evt.clientX
}
}
})
domUtils.on(文档，鼠标抬起，函数(){
_this.isTaped=false
document.onmouseup=null
document.onselectstart=null
})
},
//点击滚动槽
handleClickTrack(e，index) {
console.log(索引)
},
//更新滚动区
已更新(){
如果(this.native)返回
//垂直滚动条
如果（这个. ref__wrap.scrollHeight this .$ref__wrap.offsetHeight) {
this.barHeight=this .$ref__box.offsetHeight **2/this .$ref__wrap.scrollHeight
this . ratio=(this .$ref__wrap.scrollHeight - this .$ref__box.offsetHeight)/(this .$ ref _ _ box。偏八-这个。酒吧高度)
这个2007年12月15日，ref _ _ Bary。风格。transform=` translate y($ { this .$ ref _ _ wrap。滚动顶部/这个。ratioy } px)`
}否则{
this.barHeight=0
这个. ref__barY.style.transform=
这个. ref__wrap.style.marginRight=
}
//水平滚动条
.
},
//滚动区元素/DOM尺寸改变
handleResize() {
//更新滚动条状态
},
//.
}
}
/脚本
滚动至指定位置
p
span class= vs _ _ BTN @ click= handle滚动到( top )滚动至顶部/span
span class= vs _ _ BTN @ click= handleScrollTo( bottom )滚动至底部/span
span class= vs _ _ BTN @ click= handle滚动到(150)滚动至150像素/span
/p
v-scroll ref=vscrollRef
img src= https://cn。vue js。组织/图像/徽标。png style= height:180 px；/
pimg src= https://cn。vue js。组织/图像/徽标。png style= height:350 px；//p
p这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！/p
/v滚动
//滚动到指定位置
handleScrollTo(val) {
这个参考文献。vscrollref。滚动到(val)；
},
监听scroll滚动事件
v-scroll @scroll=handleScroll
img src= https://cn。vue js。组织/图像/徽标。png style= height:180 px；右边距：10px/
br /
pimg src= https://cn。vue js。组织/图像/徽标。png style= height:250 px；//p
p这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！这里是内容信息！/p
/v滚动
//监听滚动事件
手柄卷轴(e) {
this . scroll top=e . target . scroll top
//判断滚动状态
if(e.target.scrollTop==0) {
This.scrollStatus=到达顶端
} else if(e . target . scroll top e . target . offset height=e . target . scroll height){
This.scrollStatus=到达底部
}否则{
This.scrollStatus=滚动.
}
},
好了，以上就是基于vue.js的自定义滚动条组件希望能对大家有些帮助！
关于Vue.js桌面自定义滚动条组件VSCROL的美化的这篇文章到此为止。关于滚动条VSCROL的Vue.js美化的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。