# Switch 开关

选择开关，用于设置状态的来回切换

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

pi-switch 使用该组件定义一个switch开关

<pi-switch />

# 禁用状态

disabled 设置开关的不可点击

<pi-switch disabled />

# 开关类型

通过 type 属性可以设置switch的类型，可以指定为以下值：

line ：线框类型
fill ：实底类型

<pi-switch type="line" />
<pi-switch type="fill" />

1
2

# 自定义颜色

active-color 设置开关激活时的颜色

inactive-color 设置关闭开关时的颜色

<pi-switch
  class="pi-mg-top-16"
  active-color="#ff508a"
  inactive-color="#888888"
/>

1
2
3
4
5

# 设置开关值

active-value 设置开关激活时的值

inactive-value 设置关闭开关时的值

支持 String | Number | Boolean 类型

<pi-switch
  v-model="demo4Val"
  class="pi-mg-top-16 pi-mg-right-8"
  active-value="open"
  inactive-value="close"
/>
<pi-switch
  v-model="demo4"
  class="pi-mg-top-16 pi-mg-right-8"
  :active-value="1"
  :inactive-value="0"
/>

export default {
  data() {
    return {
      demo4Val: 'close',
      demo4: 0
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 加载状态

spinner 设置开关加载状态类型为菊花状态

<pi-switch
  :loading="isLoading"
  loading-type="spinner"
/>

export default {
  data() {
    return {
      isLoading: true
    }
  }
}

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

round 设置开关加载状态类型为圆环状态

<pi-switch
  :loading="isLoading"
  loading-type="round"
/>

export default {
  data() {
    return {
      isLoading: true
    }
  }
}

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

# 设置尺寸（默认单位rpx）

size 设置开关的尺寸大小

<text class="pi-mg-right-18 pi-fz-16">数值格式</text>
<pi-switch :size="50" />

<text class="pi-mg-right-18 pi-fz-16">字符串格式</text>
<pi-switch size="50rpx" />

1
2
3
4
5

# 不触发短促震动（iOS的微信小程序有效）

vibrate-short 设置开关是否触发短促震动

<pi-switch :vibrate-short="false" />

# API

# Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	false
customStyle	自定义样式，对象形式（默认值：{}）	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
type	线条类型	line: 线框模式，fill: 实底模式	`false`	fill
loading	是否为加载状态	`Boolean`	`false`	false
loadingType	loading类型	'spinner'-菊花 'round'-圆环	`false`	'round'
disabled	是否为禁用状态	`Boolean`	`false`	false
size	开关尺寸默认单位为rpx	`String \| Number`	`false`	50
activeColor	激活颜色，不设置时候，为主题色	`String`	`false`	-
activeValue	打开开关时对应的值	`String \| Number \| Boolean`	`false`	true
inactiveValue	关闭开关时对应的值	`String \| Number \| Boolean`	`false`	false
vibrateShort	是否使手机发生短促震动，iOS的微信小程序有效	`Boolean`	`false`	true

← Checkbox 复选框 CodeInput 校验码输入 →