如何优雅阻止view UI 的 Switch 切换？

• 2020 年 11 月 9 日
• 筆記
• ，vue, CSS, view UI

一、官方文档提供的方法

个人觉得官方提供的方法有时候不能够满足现实需求，第二点是view UI版本必须是4.0.0版本及以上才能使用这个开关组件。

二、自定义方法解决

①将开关禁用掉  加一个 disabled 属性，不用框架的默认行为。

②将开关禁用状态下的手势样式去除。

.ivu-switch-disabled:after {
    cursor: not-allowed;
}

③将以上禁用时的样式改为一下样式

.ivu-switch-disabled:after{
   cursor: pointer;
}
 .ivu-switch-disabled{
   cursor: pointer;
}

④在开关上自定义一点击事件

以上的这些操作可以阻止开关切换，等到接口执行完才会实现对应的切换。在这个绑定事件里面，可以进行与你需求相关的操作，一般是点击打开一个弹框，提示取消还是确认当前的开关操作。确定的话将调用接口，进行相关的禁用和启用操作，完成后关闭模态框，刷新页面，相关开关变为预期的状态。