Vue中mintui的field如何實現(xiàn)blur和focus事件

這篇文章主要為大家展示了“Vue中mintui的field如何實現(xiàn)blur和focus事件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中mintui的field如何實現(xiàn)blur和focus事件”這篇文章吧。

首先上代碼說總結(jié)：

<mt-field label="卡號" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field>

methods: {
 checkCard() {
 console.log('1111');
 }
}

使用@blur.native.capture=""即可實現(xiàn)。

另一種方法：

使用vue-directive指令實現(xiàn)。這種方法有個問題沒解決，不推薦使用。

<mt-field label="卡號" v-model="card.cardNo" v-mintblur></mt-field>

Vue.directive('mintblur', { // 暫不使用directive實現(xiàn)blur事件了，使用@blur.native.capture="cardNoBlur"即可。
 inserted: function(el, pra, a) {
 let oInput = el.querySelector('input');
 console.log('oInput', oInput);
 oInput.onfocus = function() {
  // 創(chuàng)建focus的事件
 };
 oInput.onblur = function() {
  console.log('blu1r');
  this.$emit(pra.expression);
 };
 }
});

這種方法暫不支持類似于v-mintblur="myfunction"調(diào)用自定義函數(shù)處理功能：

<mt-field label="卡號" v-model="card.cardNo" v-mintblur="myfunction"></mt-field>

以上是“Vue中mintui的field如何實現(xiàn)blur和focus事件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！