# Switch 滑动开关

请扫码查看示例

# 介绍

用于在打开和关闭状态之间进行切换。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-switch" src="@/node_modules/mui-minix/src/switch/index"></element>
<m-switch value="{{active}}" @m-change="onChange"></m-switch>

1
2

export default {
  data() {
    return {
      active: true
    }
  },
  onChange(e){
    this.active = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10

# 主题颜色

通过设置 theme 属性，可以改变开关的主题颜色。支持的主题颜色如下：

主题名称	颜色值
`brand`	`#267aff`
`purple`	`#995efc`
`blue-purple`	`#6575ff`
`blue`	`#29c3ff`
`cyan`	`#00cbb8`
`yellow`	`#ffaa10`
`orange`	`#ff8225`
`orange-red`	`#ff6a4c`
`gray-offline`	`#7c879b`

<element name="m-switch" src="@/node_modules/mui-minix/src/switch/index"></element>
<m-switch value="{{active}}" theme="brand" @m-change="onChange"></m-switch>
<m-switch value="{{active1}}" theme="purple" @m-change="onChange1"></m-switch>

1
2
3

export default {
  data() {
    return {
      active: true,
      active1: false
    }
  },
  onChange(e){
    this.active = e.detail
  },
  onChange1(e){
    this.active1 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 禁用状态

通过设置 disabled 属性，可以控制开关是否禁用。

<element name="m-switch" src="@/node_modules/mui-minix/src/switch/index"></element>
<m-switch value="{{active}}" theme="brand" disabeld="{{true}}" @m-change="onChange"></m-switch>

1
2

export default {
  data() {
    return {
      active: true
    }
  },
  onChange(e){
    this.active = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10

# Api

# Prop

字段	说明	类型	默认值	是否必须
`value`	开关状态	`boolean`	`false`	`是`
`theme`	主题颜色。可选的值为：`brand` `purple` `blue-purple` `blue` `cyan` `yellow` `orange` `orange-red` `gray-offline`	`string`	`brand`	`否`
`disabled`	是否禁用	`boolean`	`false`	`否`

# Events

事件名称	说明	回调参数
`m-change`	点击时触发，且开关状态不为禁用时触发	value: boolean