---
name: Switch
title: 开关
category: 表单组件
owner: 李宇航
---

## 示例

```atom 简单的示例
<template>
    <div>
        <div class="c-container">
            <h2>默认关闭</h2>
            <c-switch :checked="false"></c-switch>

            <h2>默认开启</h2>
            <c-switch :checked="true"></c-switch>

            <h2>禁用</h2>
            <c-switch :checked="true" :disabled="true"></c-switch>
        </div>
    </div>
</template>

<script type="config">
    {
        components: {
            'c-switch': 'components/Switch/Switch'
        },
        data: {
            value: false
        }
    }
</script>

<script>
    export default {
        methods: {
            onChange (e) {
                this.value = e
                console.log('change')
            }
        }
    };
</script>

```

## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
name | string |  | 可选 | 表单元素名称 | -
checked | boolean | false | 可选 | 是否选中 | -
transition | boolean | true | 可选 | 是否使用切换动效 | -
color | string | #09bb07 | 可选 | 选中颜色 | -
disabled | boolean | false | 可选 | 是否禁用 | -



### Events


- **change**: 切换开关状态

名称 | 类型 | 描述
--- | --- | ---
${param1} | string | 当前开关value