---
nav: default
---
### XSwitch
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fx-switch"/>
<a href="demo/#/component/x-switch" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/x-switch</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/x-switch" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="值转换 map">
      <x-switch title="默认 true" :value-map="['0', '1']" v-model="stringValue"></x-switch>
      <cell title="value" :value="typeof stringValue + ' ' + stringValue"></cell>
    </group>
    <group title="使用说明">
      <x-switch title="默认 false"></x-switch>
      <x-switch title="默认 true" :inline-desc="value1 + ''" v-model="value1"></x-switch>
    </group>
    <group title="禁用">
      <x-switch title="默认 fasle" disabled></x-switch>
      <x-switch title="默认 true" :value="true" disabled></x-switch>
    </group>
    <group title="使用html设置title">
      <x-switch disabled title="<span style='color:red'>我是红色</span>"></x-switch>
    </group>
  </div>
</template>

<script>
import { XSwitch, Group, Cell } from '../components/_index'

export default {
  components: {
    XSwitch,
    Group,
    Cell
  },
  methods: {
    onClick (newVal, oldVal) {
      this.$cvux.loading.show({
        text: 'in processing'
      })
      setTimeout(() => {
        this.$cvux.loading.hide()
        this.value2 = newVal
      }, 1000)
    }
  },
  data () {
    return {
      value1: true,
      value2: false,
      stringValue: '0'
    }
  }
}
</script>

```

#### Github Issue