开关 - Switch

用于状态间的切换，作为开关使用。

基本用法

<c-switch :value="true"></c-switch>

设置自定义颜色

通过checkedColor属性，自定义checked状态颜色，通过uncheckedColor属性，自定义unchecked状态颜色。

开

<c-switch
  checkedColor="#C7543A"
  uncheckedColor="#E9CD4C"
  v-model="checked"
></c-switch>
<span v-if="checked">开</span>
<span v-else>关</span>

<script>
  export default {
    data () {
      return {
        checked: true
      }
    }
  }
</script>

设置大小

通过设置size属性为small，定义小开关。

<c-switch size="small"></c-switch>

禁止开关

通过设置disabled，禁止开关。

<c-switch disabled></c-switch>

给开关传值

通过checkedValue属性和uncheckedValue属性，给开关传值。

当前值：倚栏杆处

<c-switch
  v-model="value"
  checkedColor="#00AA90"
  uncheckedColor="#E98B2A"
  checkedValue="倚栏杆处"
  uncheckedValue="正恁凝愁"
></c-switch>

<div style="margin-top: 10px">当前值：<span>{{ value }}</span></div>

<script>
export default {
  data () {
    return {
      value: "倚栏杆处"
    }
  }
}
</script>

属性说明

属性	类型	默认值	说明	可选值
disabled	Boolean	false	是否禁用	true / false
size	String	-	大小	small / -
checkedColor	String	-	checked状态背景色	-
uncheckedColor	String	-	unchecked状态背景色	-
checkedValue	-	true	checked状态代表值	-
uncheckedValue	-	false	unchecked状态代表值	-