TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊
隨便找個(gè)滾動(dòng)條插件 然后運(yùn)用一下自定義指令
可以在主入口完成
我挑選了perfect-scrollbar
大致如下
import Vue from 'vue';
//自定義滾動(dòng)條
import PerfectScrollbar from 'perfect-scrollbar';
/**
?* @description 為自定義滾動(dòng)條全局注入自定義指令。自動(dòng)判斷該更新PerfectScrollbar還是創(chuàng)建它
?* @param {Element} el - 必填。dom元素
?*/
const el_scrollBar = (el) => {
? ? //在元素上加點(diǎn)私貨，名字隨便取，確保不會(huì)和已有屬性重復(fù)即可，我取名叫做_ps_
? ? if (el._ps_ instanceof PerfectScrollbar) {
? ? ? ? el._ps_.update();
? ? } else {
? ? ? ? //el上掛一份屬性
? ? ? ? el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });
? ? }
};
Vue.directive("anyNameYouLike",{
? ? inserted(el, binding){
? ? ? ? const { arg } = binding;
? ? ? ? if(arg === "任何你喜歡的標(biāo)記"){
? ? ? ? ? ? el = el.querySelector(".el-table__body-wrapper");
? ? ? ? ? ? if(!el){
? ? ? ? ? ? ? ? return console.warn("未發(fā)現(xiàn)className為el-table__body-wrapper的dom");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? const rules = ["fixed", "absolute", "relative"];
? ? ? ? ? ? if (!rules.includes(window.getComputedStyle(el, null).position)) {
? ? ? ? ? ? ? ? console.error(`perfect-scrollbar所在的容器的position屬性必須是以下之一：${rules.join("、")}`)
? ? ? ? ? ? }
? ? ? ? ? ? el_scrollBar(el);
? ? },
? ? componentUpdated(el, binding, vnode) {
? ? ? ? const { arg } = binding;
? ? ? ? if (arg === "任何你喜歡的標(biāo)記") {
? ? ? ? ? ? el = el.querySelector(".el-table__body-wrapper");
? ? ? ? ? ? if(!el){
? ? ? ? ? ? ? ? return console.warn("未發(fā)現(xiàn)className為el-table__body-wrapper的dom");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? vnode.context.$nextTick(
? ? ? ? ? ? () => {
? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? el_scrollBar(el);
? ? ? ? ? ? ? ? } catch (error) {
? ? ? ? ? ? ? ? ? ? console.error(error);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? )
? ? },
})
然后你使用起來(lái)就很簡(jiǎn)單了
如果是普通的元素
<div v-anyNameYouLike>
? ? <!--巴拉巴拉-->
</div>
如果是餓了么的table組件
<el-table :data="你的數(shù)據(jù)源" v-anyNameYouLike:任何你喜歡的標(biāo)記>
? ? <!--巴拉巴拉-->
</el-table>
是不是很簡(jiǎn)單
效果拔群
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
之前在使用element-ui表格的時(shí)候有修改過(guò)滾動(dòng)條的樣式，但是沒(méi)有找到官方的途徑
后來(lái)是這么改的，可以參考看看
//滾動(dòng)條的寬度
.your-table .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
}
//滾動(dòng)條的滑塊
.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}
如果是整個(gè)頁(yè)面的滾動(dòng)條風(fēng)格是一致的，直接改全局的滾動(dòng)條樣式也可以有效果
//滾動(dòng)條的寬度
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
//滾動(dòng)條的滑塊
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}
滾動(dòng)條樣式存在兼容性問(wèn)題，以上的樣式是在webkit瀏覽器下可生效的
舉報(bào)