uniapp 中switch 使用

在 UniApp 开发中，Switch 控件是一个用于选择单选选项的交互元素，通常用于展示二进制状态的选择。它类似于移动端常见的开关按钮，用户可以选择开（on）或关（off）。下面是如何在 UniApp 中使用 Switch 的基本步骤：

1. 引入组件：
在 Vue 组件的模板文件 (.vue) 中，引入 Switch 组件：

   <template>
     <view>
       <u-switch v-model="isOn" :disabled="isDisabled"></u-switch> <!-- u-switch 是 UniApp 对应的标签 -->
     </view>
   </template>

2. 定义状态：
在 script 部分，你需要声明一个变量来控制 Switch 的状态：

   <script setup>
   import { ref } from 'vue';
   
   const isOn = ref(true); // 初始状态为开，也可以设为 false
   const isDisabled = ref(false); // 设置是否禁用开关，默认关闭
   </script>

3. 数据绑定：
`v-model` 是 Vue 的双向数据绑定指令，当 Switch 的状态改变时，对应的 `isOn` 变量会自动更新：

4. 显示开关变化：
当 `isOn` 改变时，你可以根据需要做相应的业务处理，比如在控制台打印日志或者触发其他功能：

   <script setup>
   ... 

   function handleSwitchChange(value) {
     console.log(`Switch status changed to ${value}`);
     // 根据 value 更新其他逻辑或界面显示
   }

   isOn.value = true; // 开启
   isOn.value = false; // 关闭

   isOn.onchange = handleSwitchChange;
   </script>

5. 禁用开关：
如果想禁止切换，可以在模板中添加 `:disabled` 属性，将其设置为 `true`：

   <u-switch v-model="isOn" :disabled="isDisabled"></u-switch>