互斥性的操作控件,用户可打开或关闭某个功能。
基本使用
开关的基本用法。
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
