從零實現Vue的組件庫（二）-Slider 實現

實現一個Slider組件，方便用戶通過拖動滑塊在一個固定區間內進行選擇，增強交互細節。

概述： 在用戶手動一些限定數字時，如果採用輸入框的形式，會需要提示信息和錯誤信息來引導用戶，這就存在一些冗餘操作。所以衍生出Slider組件，方便用戶拖動來選定一個值。

該組件的痛點在於：

• 兼容不同遊覽器的樣式；
• Slider組件的value、min、max之間的關係，以及對樣式的影響。

1. 實例

演示

代碼

實例地址：https://fatge.xyz/blog/juejin-example-3#/Slider

代碼地址：https://github.com/FatGe/UI-Library/tree/master/src/components/Slider

2. 原理

該組件的實現是基於原生的，再通過改寫樣式以達到上圖效果。

組件的基本結構如下

組件的基本結構

• 先將修改組件的thumb以及軌道track的樣式：

將其從原生的形式

將其從原生的形式

變成以下的樣式

變成以下的樣式

基於cross-browser-range-input這篇博文，進行基礎樣式的修改。

為了兼容不同的遊覽器，首先利用@mixin抽離出thumb公共的樣式。

為了兼容不同的遊覽器，首先利用@mixin抽離出thumb公共的樣式

然後適配不同的瀏覽器

適配不同的瀏覽器

然後以同樣的方法來處理track的樣式

以同樣的方法來處理track的樣式

適配不同瀏覽器

適配不同瀏覽器

此時Slider組件在不同瀏覽器下的顯示，如下圖

• Chrome

Chrome

• Firefox

Firefox

• Ie11

Ie11

此時的Ie11優秀的不得了，不僅提供了fill-upper、fill-lower還自帶tool-tip提示功能。為了讓其他瀏覽器向他靠齊，就需要實現上述兩個功能。豐富組件的結構為

豐富組件的結構

組件中progress、tooltip的樣式需要通過當前的rate值來進行修改，其規則為

組件中progress、tooltip的樣式

其中progressStyle比較好理解，就是當前rate的值佔整體的百分比，而toolTipPosition則是利用

toolTipPosition

3. 使用

進一步將其封裝成Vue的組件，配置其props、data

進一步將其封裝成Vue的組件，配置其props、data

4. 總結

封裝一個Slider組件，兼容在不同瀏覽器下的樣式，以及簡化其內部邏輯，方便後續拓展。

作者：FatGe