Vue中mintui的field实现blur和focus事件的方法


Posted in Javascript onAugust 25, 2018

首先上代码说总结:

<mt-field label="卡号" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field>
methods: {
 checkCard() {
 console.log('1111');
 }
}

使用@blur.native.capture=""即可实现。

另一种方法:

使用vue-directive指令实现。这种方法有个问题没解决,不推荐使用。

<mt-field label="卡号" v-model="card.cardNo" v-mintblur></mt-field>
Vue.directive('mintblur', { // 暂不使用directive实现blur事件了,使用@blur.native.capture="cardNoBlur"即可。
 inserted: function(el, pra, a) {
 let oInput = el.querySelector('input');
 console.log('oInput', oInput);
 oInput.onfocus = function() {
  // 创建focus的事件
 };
 oInput.onblur = function() {
  console.log('blu1r');
  this.$emit(pra.expression);
 };
 }
});

这种方法暂不支持类似于v-mintblur="myfunction"调用自定义函数处理功能:

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

以上这篇Vue中mintui的field实现blur和focus事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS画5角星方法介绍
Sep 17 Javascript
javascript的push使用指南
Dec 05 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
彻底理解Python list切片原理
2017/10/27 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
使用python绘制温度变化雷达图
2019/10/18 Python
用Python解数独的方法示例
2019/10/24 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
客户经理岗位职责
2013/12/08 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
离婚协议书标准格式
2014/10/04 职场文书
停电调休通知
2015/04/16 职场文书