有個需求,要求對輸入框進行 啟用/禁用 的切換,同時在禁用時要清除輸入框的校驗狀態(那個紅框)。
方法一:修改 formItem 字段屬性
在iview 的官方api 中並沒找到清除校驗狀態的方法,看了下源碼,用一個粗糙的方法解決了。
源文件 form-item.vue 中的 resetField方法 是通過修改這兩個屬性的值清空狀態和提示的
其實就是把 formItem 的兩個屬性值進行了修改,
v.validateDisabled 是否校驗
v.validateState 展示狀態(校驗錯誤時此處值為 'error')
v.validateMessage 錯誤提示文字
修改狀態的同時需要把校驗規則清掉,否則在提交時還會再次觸發校驗方法。
方法二:控制 form 渲染
后來在置空校驗規則的時候,初始如果沒有規則的話,則不會校驗(除非去點擊提交按鈕),然后想到用 v-if 控制 form 的渲染時機,當校驗規則發生變化的時候重新渲染,這樣就能保證規則和 DOM 是同步的,也不用費力去修改屬性
這時就用到了 Promise(真是個好東西),超簡單的做了個 callback,每次切換控制按鈕都進行這么一套渲染(主要還是代碼中調用這個方法的地方太多,懶的去改),也是粗暴的把這個需求對付上了。
搬運地址:https://segmentfault.com/a/1190000020422480