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嵌套函数调用上下文的问题解决
Mar 26 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
JS实现前端路由功能示例【原生路由】
May 29 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 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP多例模式介绍
2013/06/24 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
数组越界问题
2015/10/21 面试题
What is view? why do we have view?
2012/06/22 面试题
小学教师师德感言
2014/02/10 职场文书
个人承诺书怎么写
2014/05/24 职场文书
通信工程专业求职信
2014/06/04 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技