./20170311/245011.header
ADVERTISEMENT

我的Vue組件庫之開關(switch)組件

最近的一系列文章都是寫的關於Vue組件庫,今天我們繼續來學習如何寫出開關switch組件。

switch組件

  • 用途

switch開關組件表示的是單選效果,類似於form表單的radio按鈕,隻是switch組件是用於移動端,radio是用於PC Web端。

  • 運行效果

首先我們看下switch組件運行出來的效果,如下圖所示

...

switch組件運行效果

實現過程

  • 項目搭建

switch組件是一個可以獨立運行的npm包,通過Yeoman進行構建,再通過Gulp+Webpack構建工具,生成的項目結構如下

...

項目結構

  • switch組件之template

switch組件以.vue文件的形式存在,template部分的代碼如下

...

switch組件之template

我們來分析一下,switch組件具有哪些屬性

  1. 大小,通過size變量去控製,可以取值small,large,默認值為空

  2. 開啟的顏色,通過onColor變量控製

  3. 關閉的顏色,通過offColor變量控製

  4. 是否顯示文本,通過hasText變量去控製

  5. 開啟時顯示的文本,通過onText變量去控製

  6. 關閉時顯示的文本,通過offText變量去控製

  7. 禁用開關,通過isDisabled變量去控製

  • switch組件之script

首先我們看下script部分比較重要的computed計算屬性

...

script的計算屬性

然後看下script的method方法部分

...

script的method部分

  • switch組件之style

首先看下switch默認的樣式

...

switch默認的樣式

然後是大小,禁用等一些狀態的樣式

...

switch的大小,禁用等樣式

最後看下switch的開啟和關閉的樣式

...

switch開啟和關閉的樣式

  • 示例

通過上述的步驟,即可完成Vue的switch組件編寫,接下來看下例子的代碼,如果能運行成功的話,就可以看到文章開始的例子。

注意:在Vue2.x版本中,組件命名不能與html和svg的關鍵字一樣,而恰好switch是svg的關鍵字,所以不能直接使用switch,本文的示例中使用switches作為組件的名稱

首先是是demo的template部分,代碼如下

...

demo的template

給出一些初始值

...

demo的初始值

總結

本文主要介紹了編寫switch組件的過程,希望能對大家有幫助

如果喜歡的話,記得關注小編噢,小編後續會堅持出更多技術性的文章,如果有任何問題,也歡迎提問,小編都會盡力解答的。

ADVERTISEMENT