Vue中mintui的field實現(xiàn)blur和focus事件的方法
更新時間：2018年08月25日 11:23:41 作者：ywltoread
今天小編就為大家分享一篇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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中data和props的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編來一起學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了在Vue中如何使用Cookie操作實例的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Vue 自適應(yīng)高度表格的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
使用vue-cli創(chuàng)建項目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項目基于webpack模板打包的配置方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
Vue學(xué)習(xí)-VueRouter路由基礎(chǔ)
這篇文章主要介紹了Vue學(xué)習(xí)-VueRouter路由基礎(chǔ),路由本質(zhì)上就是超鏈接,xiamian?文章圍繞VueRouter路由的相關(guān)資料展開詳細內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了vue?+?qiankun?項目搭建,首先是通過cli3構(gòu)建vue2項目，通過qiankun改造主應(yīng)用，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
頁面內(nèi)容太多會導(dǎo)致加載速度過慢,這時可考慮使用滾動加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實現(xiàn)頁面滾動加載的示例,需要的朋友可以參考下2024-01-01
Element控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的示例代碼
我們在開發(fā)中肯定會遇到用樹形展示數(shù)據(jù)的需求,本文主要介紹了Element控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08