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

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

vscroll自定义滚动条模板

<template>
  <div class="vui__scrollbar" ref="ref__box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" v-resize="handleResize">
    <div :class="['vscroll__wrap', {native: native}]" ref="ref__wrap" @scroll="handleScroll">
      <div class="vscroll__view" v-resize="handleResize"><slot /></div>
    </div>
    <!-- //滚动条 -->
    <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) : ''}">
      <div class="vscroll__thumb" ref="ref__barY" :style="{'background': color, 'height': barHeight+'px'}" @mousedown="handleDragThumb($event, 0)"></div>
    </div>
    <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) : ''}">
      <div class="vscroll__thumb" ref="ref__barX" :style="{'background': color, 'width': barWidth+'px'}" @mousedown="handleDragThumb($event, 1)"></div>
    </div>
  </div>
</template>
 

​

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

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

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