# Switch 开关

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

# 平台差异说明

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

# 示例

# 基础用法

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

<pi-switch />
1

# 禁用状态

disabled 设置开关的不可点击

<pi-switch disabled />
1

# 开关类型

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

  1. line :线框类型
  2. 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" />
1

# 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
Last updated: 2021/7/20 下午6:34:05
10:44