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

2021-09-11 11:37:53 字數 3176 閱讀 6392

實現乙個slider元件，方便使用者通過拖動滑塊在乙個固定區間內進行選擇，增強互動細節。

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

該元件的痛點在於：

1. 例項

**



:min="20"


:max="40"


step="5" />


v-model="initvalue" />


v-model="value"


:show-tooltip="false" />


disabled />


複製**

2. 原理

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

元件的基本結構如下



:class="['slider-wrap', ]">


:class="['slider-inner', ]"


:disabled="disabled"


:min="min"


:max="max"


type="range"


v-on="$listeners"


v-model="rate"


v-bind="$attrs"


>


div>


template>


複製**
將其從原生的形式

變成以下的樣式

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

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

@mixin thumb-common-style() 


// 後續可以豐富rect-slider-thumb等型別


@mixin circle-slider-thumb() 


}複製**
然後適配不同的瀏覽器

&::-webkit-slider-thumb 


&::-moz-range-thumb 


&::-ms-thumb 


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

@mixin common-track 


複製**
適配不同瀏覽器

&::-webkit-slider-runnable-track 


&::-moz-range-track 


/* 只有ms支援fill-lower、fill-upper */


&::-ms-track 


&::-ms-fill-lower 


&::-ms-fill-upper 


複製**
此時slider元件在不同瀏覽器下的顯示，如下圖

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

v-if="!isie"


class="progress"


:style="progressstyle">


div>


:class="['slider-inner', ]"


:disabled="disabled"


:min="min"


:max="max"


type="range"


v-on="$listeners"


v-model="rate"


v-bind="$attrs"


>


v-if="!isie && showtooltip"


class="tooltip"


:style="tooltipposition">


}span>


div>


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

computed: ,


progressstyle


() = this;


return %`


};},


tooltipposition


() = this;


const xoffset = 9 - 18 * ((rate - min) / (max - min));


return %`,


marginleft: `$px`,


transform: `translatex(-50%)`};}


}複製**
其中progressstyle比較好理解，就是當前rate的值佔整體的百分比，而tooltipposition則是利用

position: absolute;


/* s of the width of the containing block */


left: 10%;


/* s of the width of the element */


tansform: translatex(-50%);


複製**
3. 使用

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

export default ,


disabled: ,


min: ,


max: ,


value: 


},// 處理v-model


model: ,


watch: ,


// 如果不存在初始值的話，以最小值為初始值


value: ,


immediate: true}}


}複製**
4. 總結

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

往期文章：

React從零實現 元件渲染和setState

在react中元件大體分為兩種，一種是乙個純函式，沒有生命週期的。另乙個通過繼承自react.component的類來實現。我們先來寫乙個component類。class component setstate partialstate this.state,partialstate updateco...

從零寫乙個 Vue（六）元件化

本篇是從零實現vue2系列第六篇，將在 yourvue 中實現 component。從這篇開始實現的內容，部落格上討論的就比較少了，不過啃原始碼肯定要啃完整。將 main.js 中的內容一部分提取到元件 helloworld 中，在 yourvue 例項上註冊 helloworld 元件。1cons...

vue從0 1的實現

在看這篇文章之前，希望你熟悉html5 css vue的語法 1 環境安裝 安裝node.js cmd檢測安裝是否正確 node v 安裝npm cmd檢測安裝是否正確 npm v 安裝 映象 npm install g cnpm registry 安裝vue npm install vue 安裝c...