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