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处理VBArray的函数使用说明
May 11 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
小程序实现侧滑删除功能
Jun 25 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
PHP 模板高级篇总结
2006/12/21 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
大学生自荐信
2013/12/11 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技