11/*
2- * name: vuescroll 2.7.0
2+ * name: vuescroll 2.7.1
33 * author: wangyi
4- * update date: 22 Jan. 2018
54 * description: A virtual scrollbar bar based on vue.js 2.0 inspired by slimscroll
65 * license: MIT
76 */
87( function ( global , factory ) {
98 typeof define === 'function' && define . amd ? define ( factory ) : typeof module !== 'undefined' ? module . exports = factory ( ) : ( global . Vue . use ( factory ( ) ) ) ;
109}
1110) ( this , function ( ) {
11+ /**
12+ * @description return the computed value of a dom
13+ * @author wangyi7099
14+ * @param {any } dom
15+ * @param {any } property
16+ */
17+ function getComputed ( dom , property ) {
18+ return window . getComputedStyle ( dom ) . getPropertyValue ( property ) ;
19+ }
20+
21+
1222
1323 var scroll = {
1424 install : function ( Vue ) {
1525 Vue . component ( vScrollBar . name , vScrollBar ) ;
1626 Vue . component ( hScrollBar . name , hScrollBar ) ;
1727 Vue . component ( vueScrollPanel . name , vueScrollPanel ) ;
18- Vue . component ( vueScrollCon . name , vueScrollCon ) ;
1928 //vueScroll
2029 Vue . component ( vueScroll . name , vueScroll ) ;
2130 }
2534 name : 'vueScrollPanel' ,
2635 render : function ( createElement ) {
2736 var vm = this ;
37+ var style = vm . scrollContentStyle ;
38+ style . overflow = 'hidden' ;
2839 return createElement ( 'div' , {
29- style : {
30- width : '100%' ,
31- height : '100%' ,
32- overflow : 'hidden'
33- } ,
40+ style : style ,
3441 class : "vueScrollPanel" ,
3542 on : {
3643 mouseenter : function ( ) {
4552 props : {
4653 id : {
4754 require : true
48- }
49- }
50- }
51- var vueScrollCon = {
52- name : 'vueScrollCon' ,
53- render : function ( createElement ) {
54- var vm = this ;
55- // console.log(this)
56- return createElement ( 'div' , {
57- style : vm . scrollContentStyle ,
58- class : "vueScrollContent" ,
59- } , this . $slots . default ) ;
60- } ,
61- props : {
55+ } ,
6256 scrollContentStyle : {
63- require : false ,
64- default : {
65- height : '100%'
66- }
57+
6758 }
6859 }
6960 }
61+
7062
7163 // vertical scrollBar
7264 var vScrollBar = {
188180 ops : {
189181 }
190182 } ,
191- scrollContent : {
192- el : "" ,
193- ops : {
194- }
195- } ,
196183 vScrollBar : {
197184 el : "" ,
198185 ops : {
231218 } ,
232219 listeners : [ ] ,
233220 mousedown : false ,
234- beginTouch : false ,
235221 isMouseLeavePanel : true
236222 }
237223 } ,
259245 on : {
260246 showBar : vm . showBar ,
261247 hideBar : vm . hideBar
262- }
263- } , [ createElement ( 'vueScrollCon' , {
264- props : {
265- scrollContentStyle : vm . scrollContent . ops
266248 } ,
267- ref : 'vueScrollCon'
268- } , vm . $slots . default ) ] ) , createElement ( 'vScrollBar' , {
249+ props : {
250+ scrollContentStyle : vm . scrollContentStyle
251+ }
252+ } , vm . $slots . default ) , createElement ( 'vScrollBar' , {
269253 props : {
270254 ops : vm . vScrollBar . ops ,
271255 state : vm . vScrollBar . state
292276 this . mergeAll ( ) ;
293277 this . listenVBarDrag ( ) ;
294278 this . listenHBarDrag ( ) ;
295- this . listenContentTouch ( ) ;
279+ this . listenPanelTouch ( ) ;
296280 // showbar at init time
297281 this . showBar ( ) ;
298282 } ,
299283 methods : {
300284 initEl ( ) {
301285 this . scrollPanel . el = this . $refs [ 'vueScrollPanel' ] && this . $refs [ 'vueScrollPanel' ] . $el ;
302- this . scrollContent . el = this . $refs [ 'vueScrollCon' ] && this . $refs [ 'vueScrollCon' ] . $el ;
303286 this . vScrollBar . el = this . $refs [ 'vScrollBar' ] && this . $refs [ 'vScrollBar' ] . $el ;
304287 this . hScrollBar . el = this . $refs [ 'hScrollBar' ] && this . $refs [ 'hScrollBar' ] . $el ;
305288 } ,
306289 mergeAll ( ) {
307290 this . merge ( this . ops . vBar , this . vScrollBar . ops ) ;
308291 this . merge ( this . ops . hBar , this . hScrollBar . ops ) ;
309- this . merge ( this . scrollContentStyle , this . scrollContent . ops , false ) ;
310292 } ,
311293 merge ( from , to , check ) {
312294 for ( key in from ) {
319301 } ,
320302 // get the bar height
321303 getVBarHeight ( { deltaY} ) {
322- var scrollPanelHeight = Math . floor ( window . getComputedStyle ( this . scrollPanel . el ) . getPropertyValue ( "height" ) . replace ( 'px' , "" ) ) ;
304+ var scrollPanelHeight = Math . floor ( getComputed ( this . scrollPanel . el , "height" ) . replace ( 'px' , "" ) ) ;
323305 var scrollPanelScrollHeight = Math . floor ( this . scrollPanel . el . scrollHeight ) ;
324306 // the last times that vertical scrollvar will scroll...
325307 var scrollTime = Math . ceil ( ( scrollPanelScrollHeight - scrollPanelHeight ) / Math . abs ( deltaY ) ) ;
339321 }
340322 } ,
341323 getHBarWidth ( { deltaX} ) {
342- var scrollPanelWidth = Math . floor ( window . getComputedStyle ( this . scrollPanel . el ) . getPropertyValue ( " width" ) . replace ( 'px' , "" ) ) ;
324+ var scrollPanelWidth = Math . floor ( getComputed ( this . scrollPanel . el , ' width' ) . replace ( 'px' , "" ) ) ;
343325 var scrollPanelScrollWidth = Math . floor ( this . scrollPanel . el . scrollWidth ) ;
344326 // the last times that horizontal scrollbar will scroll...
345327 var scrollTime = Math . ceil ( ( scrollPanelScrollWidth - scrollPanelWidth ) / Math . abs ( deltaX ) ) ;
443425 // >0 scroll to down <0 scroll to up
444426
445427 var top = this . vScrollBar . state . top ;
446- var scrollPanelHeight = window . getComputedStyle ( this . scrollPanel . el ) . getPropertyValue ( " height" ) . replace ( 'px' , "" ) ;
428+ var scrollPanelHeight = getComputed ( this . scrollPanel . el , ' height' ) . replace ( 'px' , "" ) ;
447429 var scrollPanelScrollHeight = this . scrollPanel . el . scrollHeight ;
448430 var scrollPanelScrollTop = this . scrollPanel . el . scrollTop ;
449431 var height = this . vScrollBar . state . height ;
479461 // >0 scroll to right <0 scroll to left
480462
481463 var left = this . hScrollBar . state . left ;
482- var scrollPanelWidth = window . getComputedStyle ( this . scrollPanel . el ) . getPropertyValue ( " width" ) . replace ( 'px' , "" ) ;
464+ var scrollPanelWidth = getComputed ( this . scrollPanel . el , ' width' ) . replace ( 'px' , "" ) ;
483465 var scrollPanelScrollWidth = this . scrollPanel . el . scrollWidth ;
484466 var scrollPanelScrollLeft = this . scrollPanel . el . scrollLeft ;
485467 var width = this . hScrollBar . state . width ;
579561 } ) ;
580562 vm . hScrollBar . el . addEventListener ( 'mousedown' , t ) ;
581563 } ,
582- listenContentTouch : function ( ) {
564+ listenPanelTouch : function ( ) {
583565 var vm = this ;
584- var content = this . scrollContent . el ;
566+ var pannel = this . scrollPanel . el ;
585567 var x , y ;
586568 var _x , _y ;
587569 function move ( e ) {
620602 x = touch . pageX ;
621603 y = touch . pageY ;
622604 vm . showBar ( ) ;
623- content . addEventListener ( 'touchmove' , move ) ;
624- content . addEventListener ( 'touchend' , function ( e ) {
605+ pannel . addEventListener ( 'touchmove' , move ) ;
606+ pannel . addEventListener ( 'touchend' , function ( e ) {
625607 vm . mousedown = false ;
626608 vm . hideBar ( ) ;
627- content . removeEventListener ( 'touchmove' , move ) ;
609+ pannel . removeEventListener ( 'touchmove' , move ) ;
628610 } ) ;
629611 }
630612 }
631- content . addEventListener ( 'touchstart' , t ) ;
613+ pannel . addEventListener ( 'touchstart' , t ) ;
632614 this . listeners . push ( {
633- dom : content ,
615+ dom : pannel ,
634616 event : t ,
635617 type : "touchstart"
636618 } ) ;
658640 scrollContentStyle : {
659641 default :function ( ) {
660642 return {
661-
643+ width : '100%' ,
644+ height : '100%'
662645 }
663646 }
664647 } ,
671654 function noop ( ) { }
672655
673656 return scroll ;
674- } ) ;
657+ } ) ;
0 commit comments