77 @mousedown.stop =" onTrackMousedown($event,1)"
88 @mouseenter.stop =" hoverH = true"
99 @mouseleave.stop =" hoverH = false"
10- :style =" `background-color:${trackColor};`"
10+ :style =" `background-color:${trackColor};opacity:${autoHide? 0 : 0.8} `"
1111 :class =" ['ohyeah-scroll-vertical-track-h',{'disabled': !isShowH},{'show': barHDown }]"
1212 <div @mousedown.stop =" onBarMousedown($event, 1)"
1313 ref =" ohyeahbarh"
14- :style =" `transition:transform ${transSpeed}ms;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`" div >
14+ :style =" `transition:transform ${transSpeed}ms,width 250ms ;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`" div >
1515 </div >
1616 <!-- 横向滚动条 -->
1717 <div v-if =" !noHor"
1818 @mousedown.stop =" onTrackMousedown($event,2)"
1919 @mouseenter.stop =" hoverW = true"
2020 @mouseleave.stop =" hoverW = false"
21- :style =" `background-color:${trackColor}`"
21+ :style =" `background-color:${trackColor};opacity:${autoHide? 0 : 0.8} `"
2222 :class =" ['ohyeah-scroll-vertical-track-w',{'disabled': !isShowW},{'show': barWDown }]"
2323 <div @mousedown.stop =" onBarMousedown($event,2)"
2424 ref =" ohyeahbarw"
2727 <!-- 默认内容 -->
2828 <div ref =" ohyeahbody"
2929 class =" ohyeah-scroll-body"
30- :style =" `transition:transform ${transSpeed}ms;transform:translate(-${barWScrollLeft * scaleW}px, -${barHScrollTop * scaleH}px)`"
30+ :style =" `transition:transform ${transSpeed}ms,width 250ms ;transform:translate(-${barWScrollLeft * scaleW}px, -${barHScrollTop * scaleH}px)`"
3131 <slot ></slot >
3232 </div >
3333 </div >
@@ -61,15 +61,16 @@ export default {
6161 hoverH: false , // H悬浮
6262 hoverW: false , // W悬浮
6363 timer: null ,
64- transSpeed: 0 // 过渡的速度
64+ transSpeed: 250 // 过渡的速度
6565 };
6666 },
6767 props: {
6868 noVer: { type: Boolean , default: false }, // 是否禁用垂直滚动条
6969 noHor: { type: Boolean , default: false }, // 是否禁用横向滚动条
7070 breadth: { type: Number , default: 6 }, // bar宽窄
7171 trackColor: { type: String , default: " rgba(255, 255, 255, 0.5)" // 轨道背景色
72- thumbColor: { type: String , default: " #7f7f7f" // 滑块背景色
72+ thumbColor: { type: String , default: " #7f7f7f" // 滑块背景色
73+ autoHide: { type: String , default: true } // 是否自动隐藏滚动条
7374 },
7475 mounted () {
7576 // 监听内部宽高变化,用于调整滚动条大小和位置
@@ -331,7 +332,7 @@ export default {
331332 }
332333};
333334</script >
334- <style lang="less ">
335+ <style lang="scss ">
335336.ohyeah-scroll-box {
336337 position relative ;
337338 overflow hidden ;
@@ -340,7 +341,7 @@ export default {
340341 & :hover {
341342 .ohyeah-scroll-vertical-track-h ,
342343 .ohyeah-scroll-vertical-track-w {
343- opacity : 1 ;
344+ opacity 1 !important ;
344345 }
345346 }
346347 & .transition {
@@ -367,14 +368,12 @@ export default {
367368 top 0 ;
368369 z-index 10 ;
369370 cursor : pointer ;
370- opacity : 0.8 ;
371371 transition opacity 200ms , width 200ms ;
372372 & .show {
373- opacity : 1 ;
373+ opacity 1 !important ;
374374 }
375375 & > div {
376376 border-radius 999px ;
377- transition : width 200ms ;
378377 }
379378 }
380379 .ohyeah-scroll-vertical-track-w {
@@ -386,14 +385,12 @@ export default {
386385 left 0 ;
387386 z-index 9 ;
388387 cursor : pointer ;
389- opacity : 0.8 ;
390388 transition opacity 200ms , height 200ms ;
391389 & .show {
392- opacity : 1 ;
390+ opacity 1 !important ;
393391 }
394392 & > div {
395393 border-radius 999px ;
396- transition : height 200ms ;
397394 }
398395 }
399396 .ohyeah-scroll-body {
0 commit comments