iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)
有個(gè)需求，要求對(duì)輸入框進(jìn)行 啟用/禁用 的切換，同時(shí)在禁用時(shí)要清除輸入框的校驗(yàn)狀態(tài)（那個(gè)紅框）。
方法一：修改 formItem 字段屬性
在iview 的官方api 中并沒(méi)找到清除校驗(yàn)狀態(tài)的方法，看了下源碼，用一個(gè)粗糙的方法解決了。
源文件 form-item.vue 中的 resetField方法 是通過(guò)修改這兩個(gè)屬性的值清空狀態(tài)和提示的
其實(shí)就是把 formItem 的兩個(gè)屬性值進(jìn)行了修改，
v.validateDisabled 是否校驗(yàn)
v.validateState 展示狀態(tài)（校驗(yàn)錯(cuò)誤時(shí)此處值為 'error'）
v.validateMessage 錯(cuò)誤提示文字
修改狀態(tài)的同時(shí)需要把校驗(yàn)規(guī)則清掉，否則在提交時(shí)還會(huì)再次觸發(fā)校驗(yàn)方法。
方法二：控制 form 渲染
后來(lái)在置空校驗(yàn)規(guī)則的時(shí)候，初始如果沒(méi)有規(guī)則的話，則不會(huì)校驗(yàn)（除非去點(diǎn)擊提交按鈕），然后想到用 v-if 控制 form 的渲染時(shí)機(jī)，當(dāng)校驗(yàn)規(guī)則發(fā)生變化的時(shí)候重新渲染，這樣就能保證規(guī)則和 DOM 是同步的，也不用費(fèi)力去修改屬性
這時(shí)就用到了 Promise（真是個(gè)好東西），超簡(jiǎn)單的做了個(gè) callback，每次切換控制按鈕都進(jìn)行這么一套渲染（主要還是代碼中調(diào)用這個(gè)方法的地方太多，懶的去改），也是粗暴的把這個(gè)需求對(duì)付上了。
后續(xù)研究一下，在原基礎(chǔ)上增加一個(gè)方法專門用來(lái)清除狀態(tài) ^_^
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
TagsInput 是一種可編輯的輸入框，通過(guò)回車或者分號(hào)來(lái)分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
vue-hooks是簡(jiǎn)化組件定義、復(fù)用狀態(tài)邏輯的一種最新嘗試,下面這篇文章主要給大家介紹了關(guān)于vue2中@hook的解析與妙用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue?CLI是一個(gè)強(qiáng)大的開(kāi)發(fā)工具,可用于快速搭建Vue.js項(xiàng)目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來(lái)看看vue?cli中如何使用自定義的組件吧2023-11-11
vue3.0 CLI - 2.1 - component 組件入門教程
這篇文章主要介紹了vue3.0 CLI - 2.1 - component 組件入門教程,本文主要的關(guān)注點(diǎn)就是組件，本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
解決axios post 后端無(wú)法接收數(shù)據(jù)的問(wèn)題
今天小編就為大家分享一篇解決axios post 后端無(wú)法接收數(shù)據(jù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue商品控件與購(gòu)物車聯(lián)動(dòng)效果的實(shí)例代碼
這篇文章主要介紹了Vue商品控件與購(gòu)物車聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue 組件基礎(chǔ)知識(shí)的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-11-11
vue中使用 pako.js 解密 gzip加密字符串的方法
這篇文章主要介紹了vue項(xiàng)目中 使用 pako.js 解密 gzip加密字符串 的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
淺析前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理
路由就是用來(lái)跟后端服務(wù)器進(jìn)行交互的一種方式，通過(guò)不同的路徑，來(lái)請(qǐng)求不同的資源，請(qǐng)求不同的頁(yè)面是路由的其中一種功能。這篇文章主要介紹了前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理,需要的朋友可以參考下2018-06-06