?? 怎樣定制復(fù)雜組件的自定義滾動(dòng)條？

原生滾動(dòng)條樣式一言難盡

公司項(xiàng)目需要用到多表頭等復(fù)雜的表格功能，一直使用 vxe-table 并在其基礎(chǔ)上定制開發(fā)。但相比 Element Plus 的表格，它有一個(gè)對界面來說很不友好的缺陷：不能自定義滾動(dòng)條。使用原生滾動(dòng)條會(huì)使表格右側(cè)多出一塊空白的區(qū)域，令人難受。

年前，我們要在一個(gè)新系統(tǒng)中畫甘特圖，用到了在 Github 極其流行的 vue-gantt-elastic。并不出乎意料，這玩意兒也不支持自定義滾動(dòng)條。

也許大家沒見過 Windows 的滾動(dòng)條樣式是到底有多么出戲。這里截張圖給大家感受一下。

CSS 滾動(dòng)條相關(guān)的規(guī)范如 CSS Scrollbars Styling Module 所規(guī)范的功能不多，甚至可以說太弱了。它只描述了一些用來簡單處理滾動(dòng)條樣式的屬性，如寬度和顏色?？紤]到 PC 端用戶使用鼠標(biāo)，給滾動(dòng)條加上動(dòng)畫或鼠標(biāo)交互也是完全合情合理的需求，所以依賴 CSS 滾動(dòng)條規(guī)范完全不夠用。

但大佬對原生滾動(dòng)條樣式不滿意，前端怎么能說不行呢，改?。ú皇鞘职W癢了）

尋找簡單的解決方案

要把基礎(chǔ)庫依賴的 vxe-table 直接替換為 Element Plus 表格很不現(xiàn)實(shí)。在沒做過表格調(diào)研的情況下就遷移基礎(chǔ)組件是不可接受的，何況我們只想改個(gè)滾動(dòng)條樣式。

這是 ElTable 的示例。看著這漂亮的滾動(dòng)條當(dāng)時(shí)真是心癢癢呀！

講到 Element Plus，能不能用 ElScrollbar 組件做點(diǎn)什么呢？

答案是否定的，因?yàn)?ElScrollbar 只能處理簡單的滾動(dòng)系統(tǒng)。

如圖所示，假設(shè) ElScrollbar 組件 S 本身高 400px，其直接子元素 Children 高 1000px。這個(gè)場景足夠簡單，所以能輕易獲取 S 的滾動(dòng)余量有 600px。

當(dāng)組件有復(fù)雜的層級(jí)嵌套時(shí)，ElScrollbar 組件就不知道你要使用哪一個(gè)元素去計(jì)算滾動(dòng)余量了。如圖所示，在復(fù)雜情況下，ElScrollbar 的虛擬滾動(dòng)條甚至?xí)驮鷿L動(dòng)條出現(xiàn)沖突的情況。

Use Scrollbars 的誕生

這段時(shí)間想了許多方法，也試了不少開源輪子，它們都不能滿足我“一鍵替換” vxe-table 及 vue-gantt-elastic 滾動(dòng)條樣式的需求。所以我找時(shí)間把溫習(xí)了一下瀏覽器滾動(dòng)系統(tǒng)相關(guān)知識(shí)，并把需求精簡后，封裝出順手的工具，use-scrollbars

use-scrollbars 有以下幾個(gè)特點(diǎn)：

• 它支持定制復(fù)雜組件的滾動(dòng)條樣式
• 它能提供比原生滾動(dòng)條更豐富的樣式、動(dòng)畫和交互效果
• 它使用原生滾動(dòng)事件而不是 CSS Transform 等低性能滾動(dòng)方案
• 它的狀態(tài)是響應(yīng)式的且有完整的類型提示

第一點(diǎn)，也就是我的需求，use-scrollbars 能修改 vxe-table 等復(fù)雜組件的滾動(dòng)條，這是 ElScrollbar 等其它開源組件目前無法實(shí)現(xiàn)的功能。第二點(diǎn)和第三點(diǎn)意味著更低的代碼復(fù)雜度。第四點(diǎn)是說 use-scrollbars 是用 TypeSript 實(shí)現(xiàn)的 Vue Hook...

使用示例

對于簡單的滾動(dòng)系統(tǒng)，use-scrollbars 能做到 API 足夠簡單。

<template>
  <div ref="elemRef">
    long content long content ...
    long content long content ...
    long content long content ...
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useSrollbar } from 'use-scrollbars'

const elemRef = ref(null);
const barStates = useScrollbar(elemRef);
</script>

那怎么使用 use-scrollbars 修改復(fù)雜的組件比如 vxe-table 呢？

代碼雖然沒有大家想象的那么短，但一定是可以理解的。

第一步，使用 devtools 確認(rèn)滾動(dòng)系統(tǒng)，并在代碼中將相關(guān)元素選取出來。

const $table = tableRef.value.$el;
const $header = $table.querySelector(".vxe-table--header-wrapper");
const $bodyWrapper = $table.querySelector(".vxe-table--body-wrapper");
const $bodyContent = $table.querySelector(".vxe-table--body");
const $bodyXSpace = $table.querySelector(".vxe-body--x-space");
const $bodyYSpace = $table.querySelector(".vxe-body--y-space");

第二步，通過 use-scrollbars 初始化這些滾動(dòng)系統(tǒng)。

const barStates = useScrollbar();
barStates.init({
  mount: tableRef,
  content: [$bodyWrapper, $bodyContent, $bodyXSpace, $bodyYSpace],
  viewport: [$bodyWrapper]
});

第三步，調(diào)整樣式，適配虛擬滾動(dòng)條。

.vxe-table--body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}
// ... and more

最后，這是效果對比。

到此這篇關(guān)于基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3組件滾動(dòng)條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論