视频直播系统源码，vue自定义模拟滚动条

vscroll自定义滚动条模板

<br><template><br>  <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" v-resize="handleResize"><br>    <div :class="['vscroll__wrap', {native: native}]" ref="ref__wrap" @scroll="handleScroll"><br>      <div class="vscroll__view" v-resize="handleResize"><slot /></div><br>    </div><br>    <!-- //滚动条 --><br>    <div :class="['vscroll__bar vertical', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 0)" :style="{'width': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"><br>      <div class="vscroll__thumb" ref="ref__barY" :style="{'background': color, 'height': barHeight+'px'}" @mousedown="handleDragThumb($event, 0)"></div><br>    </div><br>    <div :class="['vscroll__bar horizontal', {ishide: !isShow}]" @mousedown="handleClickTrack($event, 1)" :style="{'height': parseInt(size)>=0 ? parseInt(size)+'px' : '', 'z-index': parseInt(zIndex)>=0 ? parseInt(zIndex) : ''}"><br>      <div class="vscroll__thumb" ref="ref__barX" :style="{'background': color, 'width': barWidth+'px'}" @mousedown="handleDragThumb($event, 1)"></div><br>    </div><br>  </div><br></template><br> 

vue.js中通过directive自定义指令函数来动态监听DOM尺寸 (宽高改变)。

<br>// 监听元素/DOM尺寸变化<br>directives: {<br>    'resize': {<br>        bind: function(el, binding) {<br>            let width = '', height = '';<br>            function get() {<br>            const elStyle = el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null);<br>            if (width !== elStyle.width || height !== elStyle.height) {<br>                binding.value({width, height});<br>            }<br>            width = elStyle.width;<br>            height = elStyle.height;<br>            }<br>            el.__vueReize__ = setInterval(get, 16);<br>        },<br>        unbind: function(el) {<br>            clearInterval(el.__vueReize__);<br>        }<br>    } 

以上就是视频直播系统源码，vue自定义模拟滚动条，更多内容欢迎关注之后的文章