Element-UI MCP Server

## Switch 开关 表示两种相互对立的状态间的切换，多用于触发「开/关」。 ### 基本用法 :::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。 ```html <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> <script> export default { data() { return { value: true } } }; </script> ``` ::: ### 文字描述 :::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。 ```html <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费"> </el-switch> <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"> </el-switch> <script> export default { data() { return { value1: true, value2: true } } }; </script> ``` ::: ### 扩展的 value 类型 :::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。 ```html <el-tooltip :content="'Switch value: ' + value" placement="top"> <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"> </el-switch> </el-tooltip> <script> export default { data() { return { value: '100' } } }; </script> ``` ::: ### 禁用状态 :::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。 ```html <el-switch v-model="value1" disabled> </el-switch> <el-switch v-model="value2" disabled> </el-switch> <script> export default { data() { return { value1: true, value2: false } } }; </script> ``` :::