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

首先上代码说总结：

<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事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • mint-ui在vue中的使用示例

    本文介绍了mint-ui在vue中的使用示例,分享给大家,具体如下: 首先放上 mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己在用,网上能找到的资料也不是很详细,自己写写咯.持续更新...emmmmm,应该可以吧,我这么懒.希望能给别人带来帮助. 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的

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

    首先上代码说总结: <mt-field label="卡号" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field> methods: { checkCard() { console.log('1111'); } } 使用@blur.native.capture=""即可实现. 另一种方法: 使用vue-directive指令

  • vue中mint-ui环境搭建详细介绍

     vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil

  • vue中mint-ui的使用方法

    mint-ui在vue中的使用,供大家参考,具体内容如下 首先放上mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己在用,网上能找到的资料也不是很详细,自己写写咯.持续更新...emmmmm,应该可以吧,我这么懒.希望能给别人带来帮助. 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要

  • vue中使用iview自定义验证关键词输入框问题及解决方法

    一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

  • C#中winform实现自动触发鼠标、键盘事件的方法

    程序触发鼠标.键盘事件是C#程序设计中比较常见的功能,本文实例展示了C#中winform实现自动触发鼠标.键盘事件的方法,有不错的实用价值.具体如下: 要想在C#程序中触发鼠标.键盘事件就必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// </summary> /// <param name="flags">事件类型</param> /

  • vuejs中监听窗口关闭和窗口刷新事件的方法

    1.使用window.onunload之类的API window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2.在生命周期钩子中注册监听事件 methods: { beforeun

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

随机推荐