vue自定義switch開關，使用less支援換膚

實際專案用到了，記錄一下，也方便以後使用，這樣也可以避免為了使用乙個switch，引入整個外部web框架；

也可以方便更好的理解是和使用less。

基礎**使用的是網上的，然後自己新增了less換膚，修改了樣式。

**如下：

<

template
>
<
div 
:class
="">
<
span 
class
="weui-switch"
:class
="":value
="value"
@click
="toggle"
style
="position:relative"
>
<
div 
v-if
="ischecked && direction.length > 0"
style
="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#fff;user-select:none"
>}  
div>
<
div 
v-if
="!ischecked && direction.length > 0"
style
="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7a7a7a;text-align:right;user-select:none"
>}  
div>
span
>
div>
template
>
<
script
>
export 
default
,              
//開關文字描述
text: ,
//目前定義的乙個主題，支援後續自己替換
danger: ,
},data() 
},computed:  
else}},
watch: ,
ischecked(val) 
},methods: }}
script
>
<
style 
scoped lang
="less"
>
/*公共函式部分 
*/.theme(@default-color,@border-color) 
.weui-switch:before 
.weui-switch:after 
.weui-switch-on:after 
.weui-switch-on 
.weui-switch-on:before 
.weui-switch-on:after 
}    
/*不同主題傳不同的變數
*/.theme-default 
.theme-danger 
style
>

自定義開關

自定義開關 用我自己的話來講 自定義控制項就是自己繪製影象展示呈控制項 但有根據使用者的操作的控制項必須跟隨著繪製新影象並展示控制項public class toggleview extends view canvas.drawbitmap slidebuttonbackground,left,0,...

自定義View之Switch

思路 定義類繼承view，重寫幾個用到的方法 1.三個構造方法 2.onmeasure測量 onlayout布局 ondrow繪圖 3.ontouchevent觸控事件方法 invalidate 可以高頻度的呼叫ondraw 定義乙個外部介面，將開關狀態傳出去 新增設定介面物件的方法，外部進行呼叫 ...

Android 自定義Switch 樣式

自定義switch首先要熟悉兩個屬性，thumb與trace thumb 代表按鈕的意思，就是switch左右兩邊那個 trace 代表軌跡的意思，就是thumb在來回滑動過程中變化的軌跡 自定義thumb 自定義trace關閉狀態 xmlns android android color dbdbd...