Switch 开关

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

Events