如何優雅阻止view UI 的 Switch 切換？

一、官方文件提供的方法

 

個人覺得官方提供的方法有時候不能夠滿足現實需求，第二點是view UI版本必須是4.0.0版本及以上才能使用這個開關元件。

二、自定義方法解決

①將開關禁用掉  加一個 disabled 屬性，不用框架的預設行為。

②將開關禁用狀態下的手勢樣式去除。

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

③將以上禁用時的樣式改為一下樣式

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

④在開關上自定義一點選事件

以上的這些操作可以阻止開關切換，等到介面執行完才會實現對應的切換。在這個繫結事件裡面，可以進行與你需求相關的操作，一般是點選開啟一個彈框，提示取消還是確認當前的開關操作。確定的話將呼叫介面，進行相關的禁用和啟用操作，完成後關閉模態框，重新整理頁面，相關開關變為預期的狀態。