Mango UI

Switch 开关 pass 0.0.13+

基础用法

基础样式如下，使用v-model绑定

展开查看
<mg-switch v-model="value"></mg-switch>
1

自定义背景

使用checked-colorunchecked-color自定义背景色

注意！

在使用自定义颜色的属性时，请务必传入v-model的值
否则switch将永远是unchecked-color！ （请注意下例中的第三个switch）

展开查看
<mg-switch v-model="value" :checked-color="'#f40'" :unchecked-color="'blue'"></mg-switch>
<mg-switch v-model="value" :checked-color="'#000'" :unchecked-color="'yellow'"></mg-switch>

<!-- 此处未使用v-model, switch背景色将一直是 'gray'  -->
<mg-switch :checked-color="'blue'" :unchecked-color="'gray'"></mg-switch>
1
2
3
4
5

自定义value

选中与非选中的值可以自己设置

value：true ;
checkedValue="'1'" uncheckedValue="'2'"

value1：abc ;
checkedValue="'check'" uncheckedValue="'uncheck'"

展开查看
  <p> value：{{value}} ; <br>checkedValue="'1'" uncheckedValue="'2'"</p>
  <mg-switch v-model="value" :checked-value="'1'" :unchecked-value="'2'"></mg-switch>

  <p> value1：{{value1}} ; <br>checkedValue="'check'" uncheckedValue="'uncheck'"</p>
  <mg-switch v-model="value1" :checked-value="'check'" :unchecked-value="'uncheck'"></mg-switch>

  <script>
    export default{
      data() {
        return {
          value:true,
          value1:"abc"
        }
      }
    }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
关于自定义value

其实从第一个例子可以看出，在判断选中状态的实现上，采用的 "=="的写法，而不是 "==="
这里在开发过程中也的确有些纠结...至于过程这里就不展开了...

Switch Attributes

参数说明类型可选值默认值
checkedValue选中时的值string/number/boolean-true
uncheckedValue未选中时的值string/number/boolean-false
checkedColor选中时的背景色string—-
uncheckedColor非选中时的背景色string—-

Switch Event

事件说明回参
change状态改变时触发-