封装 v-vue-onkeypress 指令

codeGoogle 发布于2019-08-22 18:14 / 2335人阅读

摘要：在开发项目的过程中，遇到一个常见的需求，输入框只能输入数字，最开始的时候是这样写的后发现不兼容火狐浏览器，于是修改成经测试，没有问题了，由于使用的地方较多，便萌生了封装一个指令的想法，代码如下验证数字函数最后在注册全局指令然后就阔以使用了

在开发项目的过程中，遇到一个常见的需求，输入框只能输入数字，最开始的时候是这样写的

后发现不兼容火狐浏览器，于是修改成

经测试，没有问题了，由于使用的地方较多，便萌生了封装一个指令的想法，代码如下

onkeypress.js

import {checkNumber} from "../../utils/util"

export default {
  bind: function (el,binding) {
    el.onkeypress = function(e){
      return checkNumber(e)
    }
  }
}

验证数字函数 util.js

export function checkNumber(e) {
  let ev = e || event;
  return (/[d]/.test(String.fromCharCode(ev.keyCode || ev.which))) || ev.which === 8
}

index.js

import VueOnkeypress from "./onkeypress.js"

const install = function(Vue) {
  Vue.directive("VueOnkeypress", VueOnkeypress)
}

if (window.Vue) {
  window.VueOnkeypress = VueOnkeypress
  Vue.use(install);
}

VueOnkeypress.install = install
export default VueOnkeypress

最后在main.js注册全局指令

import VueOnkeypress from "src/directive/onkeypress/index"


Vue.directive("VueOnkeypress", VueOnkeypress);

然后就阔以使用了

end

云服务器 GPU云服务器封装成封装类封装函数函数封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95639.html

每个人都能实现的vue自定义指令

摘要：指令绑定的前一个值，仅在和钩子中可用。字符串形式的指令表达式。上一个虚拟节点在上可根据需要定义一些钩子函数只调用一次，指令第一次绑定到元素时调用。指令的值可能发生了改变，也可能没有。前文先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多...

NickZhou 2019-08-21 18:23 评论0 收藏0
高级 Angular 组件模式 (3b)

摘要：原文的第四篇文章中的一个重要元素在上一篇文章中没有涉及，使用高阶组件中的常用模式可以将组件中的公用逻辑分离出来。同时，因为组件的模板并不存在任何的变动，我们可以将它转化为一个指令，这样我们可以以更加灵活的方式来使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

wums 2019-08-21 18:46 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
vue 实践心得和技巧（一）

摘要：原文这个系列记录我在一年开发中总结的一些经验和技巧。利用提升性能是新增的特性，可以冻结一个对象，防止对象被修改。仅在不得已的时候使用。一个指令应该表示一个独立的功能，可以为不同的标签和组件提供相同的功能。原文： https://github.com/Coffcer/Bl... 这个系列记录我在一年vue开发中总结的一些经验和技巧。利用Object.freeze()提升性能 Obje...

X1nFLY 2019-08-22 10:35 评论0 收藏0