Question

import { Switch } from 'feui';
components: {
  [Switch.name]: Switch
},
data() {
  return {
    defaultT: true,
    defaultF: false,
    stringValue: '0'
  };
},
methods: {
  onClick (newVal, oldVal) {
    console.log(newVal, oldVal)
    Toast.loading({
      duration: 1000,
      message: "处理中..."
    });
    setTimeout(() => {
      this.defaultF = newVal
    }, 1000);
  }
}

代码演示

基础用法

<fe-group title='一般使用'>
  <fe-switch title="默认false"></fe-switch>
  <fe-switch title="默认true"  :inline-desc="defaultT + ''" v-model="defaultT"></fe-switch>
</fe-group>

不可用状态

<fe-group title="disabled">
  <fe-switch title="默认false" disabled></fe-switch>
  <fe-switch title="默认true" :value="true" disabled></fe-switch>
</fe-group>

自定义选中颜色

<fe-group title="设置title 颜色">
  <fe-switch  title="<span style='color:red'>我的颜色</span>"></fe-switch>
</fe-group>

阻止默认事件

<fe-group title="阻止默认">
  <fe-switch title="默认false" prevent-default v-model="defaultF" 
    @on-click="onClick">
  </fe-switch>
</fe-group>

自定义占位符和标签

<fe-group title="值转换 map">
  <fe-switch title="默认true" :value-map="['0', '1']" 
    v-model="stringValue">
  </fe-switch>
  <fe-cell title="值" :value="typeof stringValue + ' ' + stringValue"></fe-cell>
</fe-group>

API

参数	说明	类型	默认值	可选值
title	label显示的文字	String	-	-
value	表单值, 使用v-model绑定	Boolean	false	false,true
disabled	是否可用选择	Boolean	false	false,true
inline-desc	标签下显示的文字	String	-	-
prevent-default	阻止点击时自动设定值	Boolean	false	false,true
value-map	用于自定义 false 和 true 映射的实际值	Array	[false, true]	-
-	-	-	-	-

Events

事件名	参数	说明	备注
on-change	value	值变化时触发，参数为 (currentValue)	-
on-click	newVal, oldVal	点击组件时触发	-
-	-	-	-