首先是perfect-scrollbar的安装。选择插件而不是直接改css的原因,是因为需要兼容火狐你懂的。
npm install perfect-scrollbar --save-dev
public.css,scroll-item是自定义类,类似于指令效果,加上clssname就自动生成scrollbar。之所以不用指令,是因为无法修改element-ui组件,用classname方便一点。transfer-main类好像是我用的另外一个插件里面的。
.scroll-item,.el-table__body-wrapper,.el-transfer-panel__list,.transfer-main {
position: relative;
overflow: hidden !important;
}
.ps__rail-x {
height: 6px !important;
}
.ps__rail-y {
width: 6px !important;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
height: 6px !important;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
width: 6px !important;
}
main.js
import PScrollbar from 'perfect-scrollbar';
import "perfect-scrollbar/css/perfect-scrollbar.css";
const scrollClassName = [
{
name:"scroll-item",
props:{//props参考perfect-scrollbar文档
suppressScrollX : true,
}
},{
name:"el-table__body-wrapper",
props:{
suppressScrollY : true,
}
},{
name:"el-transfer-panel__list",
props:{
suppressScrollX : true,
}
},{
name:"transfer-main",
props:{
}
}
];
const update = (el => {
let className = el.className;
if(className){
let arr = className.split(" ");
scrollClassName.forEach(item => {
if(arr.indexOf(item.name)>-1){
componentsScroll(el,item.props);
}
})
}
if(el.children&&el.children.length>0){
for(let i=0;i<el.children.length;i++){
update(el.children[i]);
}
}
})
//这个方法是网上看到哒,直接拿过来用了
const componentsScroll = (el,props) => {
//在元素上加点私货,名字随便取,确保不会和已有属性重复即可,我取名叫做_ps_
if (el._ps_ instanceof PScrollbar) {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PScrollbar(el, props);
}
};
Vue.prototype.setScrollBar = function(){
this.$nextTick(() => {
update(this.$el);
})
},
main.vue(放在app.vue里面没用)
mounted(){
this.setScrollBar();
window.onresize = () => {
window.location.reload();
}
},
悄悄告诉你,onersize时候刷新页面,可以解决好多自适应问题