互斥性的操作控件,用户可打开或关闭某个功能。
基本使用
开关的基本用法。
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>
内嵌文字
开关可以内嵌文字,文字可以通过 checkedText
和 uncheckedText
属性设置。
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<Switch>
events