1313 :class =" ['ohyeah-scroll-vertical-track-h',{'disabled': !isShowH},{'show': barHDown },{'left': left}]"
1414 <div @mousedown.stop =" onBarMousedown($event, 1)"
1515 ref =" ohyeahbarh"
16- :style =" `transition:transform ${transSpeed}ms,width 250ms,height 250ms;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`" ></ div >
16+ :style =" `transition:transform ${transSpeed}ms,width 250ms,height 250ms;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`" / >
1717 </div >
1818 <!-- 横向滚动条 -->
1919 <div v-if =" !noHor"
2424 :class =" ['ohyeah-scroll-vertical-track-w',{'disabled': !isShowW},{'show': barWDown },{'top': top}]"
2525 <div @mousedown.stop =" onBarMousedown($event,2)"
2626 ref =" ohyeahbarw"
27- :style =" `transition:transform ${transSpeed}ms,height 250ms,width 250ms;background-color:${thumbColor};height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`" ></ div >
27+ :style =" `transition:transform ${transSpeed}ms,height 250ms,width 250ms;background-color:${thumbColor};height:${(hoverW || barWDown) ? breadth + 4 : breadth}px;width: ${barWTall}px;transform: translateX(${barWScrollLeft}px)`" / >
2828 </div >
2929 <!-- 默认内容 -->
3030 <div ref =" ohyeahbody"
4040</template >
4141<script >
4242import ElementResizeDetectorMaker from " element-resize-detector"
43-
4443export default {
4544 name: " ohyeah"
4645 data () {
4746 return {
48- isMobile: / (android)| (iphone)| (symbianos)| (windows phone)| (ipad)| (ipod)/ .test (
49- navigator .userAgent .toLowerCase ()
50- ),
47+ isMobile: false ,
5148 observer: null , // 监听变化
5249 isShowH: false , // 是否显示垂直滚动条
5350 isShowW: false , // 是否显示横向滚动条,
@@ -71,11 +68,7 @@ export default {
7168 hoverW: false , // W悬浮
7269 transSpeed: 250 , // 过渡的速度
7370 timer: 0 ,
74- slow:
75- navigator .userAgent .indexOf (" Firefox" >= 0 &&
76- navigator .userAgent .indexOf (" Windows" >= 0
77- ? 8
78- : 0.2 // 减缓滚轮的速度,太快了,windows版本的火狐特殊处理
71+ slow: 0.22
7972 };
8073 },
8174 props: {
@@ -89,10 +82,19 @@ export default {
8982 autoHide: { type: Boolean , default: true }, // 是否自动隐藏滚动条
9083 minLength: { type: Number , default: 20 }, // 滑块最小长度
9184 width: { type: [Number , String ], default: " 100%" // ohyeah容器宽度
92- height: { type: [Number , String ], default: " 100%" // ohyeah容器高度
85+ height: { type: [Number , String ], default: " 100%" // ohyeah容器高度
86+ resizeObject: { type: Boolean , default: false } // resize模式,默认scroll
9387 },
9488 mounted () {
9589 // 监听内部宽高变化,用于调整滚动条大小和位置
90+ this .isMobile = / (android)| (iphone)| (symbianos)| (windows phone)| (ipad)| (ipod)/ .test (
91+ navigator .userAgent .toLowerCase ()
92+ );
93+ this .slow =
94+ navigator .userAgent .indexOf (" Firefox" >= 0 &&
95+ navigator .userAgent .indexOf (" Windows" >= 0
96+ ? 8
97+ : 0.22 ;
9698 if (this .isMobile ) {
9799 return ;
98100 }
@@ -112,7 +114,8 @@ export default {
112114 if (window .ResizeObserver ) {
113115 this .observer .disconnect ();
114116 } else {
115- this .observer .uninstall ();
117+ this .observer .uninstall (this .$refs .ohyeahbody );
118+ this .observer .uninstall (this .$refs .ohyeahbox );
116119 }
117120 this .observer = null ;
118121 },
@@ -192,9 +195,9 @@ export default {
192195 this .observer .observe (this .$refs .ohyeahbody );
193196 this .observer .observe (this .$refs .ohyeahbox );
194197 } else {
195- this .observer = ElementResizeDetectorMaker ({
196- strategy: " scroll"
197- } );
198+ this .observer = ElementResizeDetectorMaker (
199+ this . resizeObject ? null : { strategy: " scroll" }
200+ );
198201 this .observer .listenTo (this .$refs .ohyeahbody , this .callback );
199202 this .observer .listenTo (this .$refs .ohyeahbox , this .callback );
200203 }
0 commit comments