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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
vue实现搜索过滤效果
May 28 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
北京大学自荐信范文
2014/01/28 职场文书
趣味比赛活动方案
2014/02/15 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
关于学习的演讲稿
2014/05/10 职场文书
网站出售协议书范文
2014/10/10 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
大学推普周活动总结
2015/05/07 职场文书
河童之夏观后感
2015/06/11 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android