vue watch 修改滚动条_使用 Vue 开发 scrollbar 滚动条组件(示例代码)

import {trim, delay, round, throttle } from "lodash";//------------------------------------------------------------------------------

//检测 class

const hasClass = (el = null, cls = ‘‘) =>{if (!el || !cls) { return false; }if (cls.indexOf(‘ ‘) !== -1) { throw new Error(‘className should not contain space.‘); }if (el.classList) { returnel.classList.contains(cls); }return ` ${el.className} `.indexOf(` ${cls} `) > -1;

};//------------------------------------------------------------------------------

//添加 class

const addClass = (element = null, cls = ‘‘) =>{

const el=element;if (!el) { return; }

let curClass=el.className;

const classes= cls.split(‘ ‘);for (let i = 0, j = classes.length; i < j; i += 1) {

const clsName=classes[i];if (!clsName) { continue; }if(el.classList) {

el.classList.add(clsName);

}else if (!hasClass(el, clsName)) {

curClass+= ‘ ‘ +clsName;

}

}if (!el.classList) {

el.className=curClass;

}

};//------------------------------------------------------------------------------

//删除 class

const removeClass = (element, cls) =>{

const el=element;if (!el || !cls) { return; }

const classes= cls.split(‘ ‘);

let curClass=` ${el.className} `;for (let i = 0, j = classes.length; i < j; i += 1) {

const clsName=classes[i];if (!clsName) { continue; }if(el.classList) {

el.classList.remove(clsName);

}else if(hasClass(el, clsName)) {

curClass= curClass.replace(` ${clsName} `, ‘ ‘);

}

}if (!el.classList) {

el.className=trim(curClass);

}

};//------------------------------------------------------------------------------

//获取滚动条宽度

let scrollWidth = 0;

const getScrollWidth= () =>{if (scrollWidth > 0) { returnscrollWidth; }

const block= document.createElement(‘div‘);

block.style.cssText= ‘position:absolute;top:-1000px;width:100px;height:100px;overflow-y:scroll;‘;

document.body.appendChild(block);

const { clientWidth, offsetWidth }=block;

document.body.removeChild(block);

scrollWidth= offsetWidth -clientWidth;returnscrollWidth;

};//scrollSize 值

const SCROLLBARSIZE =getScrollWidth();/**

* UiScrollbar Component

* @author zhangmao 19/4/3*/exportdefault{

name:‘UiScrollbar‘,

props: {

size: { type: String,default: ‘normal‘ }, //small

//主要是为了解决在 dropdown 隐藏的情况下无法获取当前容器的真实 width height 的问题

sho