switch

开关选择

基础示例

完整单页示例，可直接替换 BlueOS Studio 模板工程的首页 index.ux 运行。checked 绑定 data 中声明的响应式字段，change 事件回传最新状态，示例把状态同步到旁边的文字说明。

<script>
  export default {
    data: {
      enabled: false,
      statusText: '已关闭',
    },
    onSwitchChange(evt) {
      this.enabled = evt.checked
      this.statusText = evt.checked ? '已开启' : '已关闭'
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-3xl">震动提醒</text>
    <div class="flex flex-row items-center mt-20">
      <switch class="switch-item" checked="{{enabled}}" onchange="onSwitchChange"></switch>
      <text class="text-white text-2xl">{{ statusText }}</text>
    </div>
  </div>
</template>

<style>
@tailwind utilities;

.switch-item {
  margin-right: 20px;
}
</style>

请始终通过 change 事件回写 data 字段来维护开关状态，不要在模板外直接赋值未声明的字段，否则视图不会更新。

子组件

不支持

属性

支持通用属性

名称	类型	默认值	必填	描述
checked	<boolean>	false	否	可触发 checked 伪类

样式

支持通用样式

名称	类型	默认值	必填	描述
thumb-color	<color>	#009385	否	滑块颜色
track-color	<color>	#009385	否	滑轨颜色

事件

支持通用事件

名称	参数	描述
change	{checked:checkedValue}	checked 状态改变时触发