Skip to content
iuiDesign
100%
02:32
本页目录

互斥性的操作控件,用户可打开或关闭某个功能。

基本使用

开关的基本用法。

html
<iui-switch></iui-switch>
<iui-switch></iui-switch>

禁用状态

禁用开关。

html
<iui-switch disabled></iui-switch>
<iui-switch disabled></iui-switch>

方形开关

如果需要方形的开关,可以设置 shape 属性。

html
<iui-switch shape="square"></iui-switch>
<iui-switch shape="square"></iui-switch>

内嵌文字

开关可以内嵌文字,文字可以通过 checkedTextuncheckedText 属性设置。

html
<iui-switch checkedText="开" uncheckedText="关"></iui-switch>
<iui-switch checkedText="" uncheckedText=""></iui-switch>

异步开关

html
<iui-switch :beforeChange="before"></iui-switch>

<script setup>
  // 通过 done 回调函数,可以异步控制开关的状态
  const before = (value, done) => {
    uni.showModal({
      title: "提示",
      content: `确认将开关调整为 ${value} 吗?`,
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          done();
        }
      },
    });
  };
</script>
<iui-switch :beforeChange="before"></iui-switch>

<script setup>
  // 通过 done 回调函数,可以异步控制开关的状态
  const before = (value, done) => {
    uni.showModal({
      title: "提示",
      content: `确认将开关调整为 ${value} 吗?`,
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          done();
        }
      },
    });
  };
</script>

API

<Switch>props
参数描述类型默认值
modelValue (v-model)开关状态Booleanfalse
disabled是否禁用Booleanfalse
color开关颜色String#165DFF
size开关尺寸small | medium | largemedium
activeText开启文本String-
uncheckedText关闭文本String-
shape开关形状round | squareround
beforeChange开关状态切换前的回调函数Function(done: Function)-
<Switch>events
事件名描述参数
change开关切换时触发事件modelValue: Boolean