更新记录

1.0.0（2026-06-25） 下载此版本

新增

• 初始版本发布
• 支持 Vue2 和 Vue3
• 兼容小程序、H5、App 多端
• 支持 active-text 和 inactive-text 属性设置开关文字描述
• 支持 inline-prompt 属性控制文本是否显示在点内
• 支持 active-value 和 inactive-value 属性，接受 Boolean、String 或 Number 类型的值
• 支持 disabled 属性禁用开关
• 支持 size 属性设置开关大小（large、default、small）
• 支持 width 属性设置开关宽度
• 支持 active-color 和 inactive-color 属性自定义颜色

平台兼容性

uni-app(5.07)

jx-switch

一个兼容 Vue2/Vue3，支持小程序、H5、App 的开关组件。

特性

• ✅ 支持 Vue2 和 Vue3
• ✅ 兼容小程序、H5、App 多端
• ✅ 支持自定义开关文字描述
• ✅ 支持文本显示在点内
• ✅ 支持自定义开关值类型（Boolean、String、Number）
• ✅ 支持禁用状态
• ✅ 支持自定义尺寸和宽度

安装

将 jx-switch 组件复制到项目的 uni_modules 目录下即可使用。

基础用法

<template>
  <jx-switch v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: false
    };
  }
};
</script>

文字描述

使用 active-text 和 inactive-text 属性来设置开关的文字描述。

<jx-switch 
  v-model="value" 
  active-text="开启" 
  inactive-text="关闭" 
/>

文本显示在点内

使用 inline-prompt 属性来控制文本是否显示在点内。

<jx-switch 
  v-model="value" 
  active-text="是" 
  inactive-text="否" 
  :inline-prompt="true" 
/>

自定义值

设置 active-value 和 inactive-value 属性，它们接受 Boolean、String 或 Number 类型的值。

<jx-switch 
  v-model="value" 
  active-value="1" 
  inactive-value="0" 
/>

<jx-switch 
  v-model="value2" 
  :active-value="100" 
  :inactive-value="0" 
/>

禁用状态

设置 disabled 属性，接受一个 Boolean，设置 true 即可禁用。

<jx-switch v-model="value" disabled />
<jx-switch v-model="value" disabled :active-value="1" :inactive-value="0" />

不同尺寸

使用 size 属性设置开关的大小，可选值为 large、default、small。

<jx-switch v-model="value" size="large" />
<jx-switch v-model="value" size="default" />
<jx-switch v-model="value" size="small" />

自定义宽度

使用 width 属性设置开关的宽度。

<jx-switch v-model="value" :width="60" />

自定义颜色

使用 active-color 和 inactive-color 属性设置开关的背景色。

<jx-switch 
  v-model="value" 
  active-color="#13CE66" 
  inactive-color="#FF4949" 
/>

API

Props

Events

注意事项

1. 组件同时支持 value 和 v-model 两种绑定方式
2. 在 Vue2 中使用 v-model 或 @input 事件
3. 在 Vue3 中使用 v-model 或 @update:modelValue 事件
4. 组件会同时触发 input、change、update:modelValue 三个事件，确保兼容 Vue2 和 Vue3

平台兼容

• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 字节跳动小程序
• ✅ QQ小程序
• ✅ 快手小程序
• ✅ 京东小程序
• ✅ 飞书小程序
• ✅ 小红书小程序
• ✅ App (Android & iOS)
• ✅ 快应用

更新日志

查看 changelog.md 获取更新信息。