vue自定义指令封装(el-input框只能输入正整数)

1.main.js 中添加如下代码

复制代码
Vue.directive('enterNumber', {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if(charcode == 46){
        if(el.value.includes('.')){
          e.preventDefault();
        }
        return;
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
            e.returnValue = false;
        }
      }
    });
  }
});

2.页面使用

main.js中的name 以-连接 并且前面加上v-

相关推荐
JiaWen技术圈14 分钟前
主流非 JWT 式 Access Token 方案
前端·安全
ZC跨境爬虫35 分钟前
跟着 MDN 学 HTML day_57:(HTML 表格进阶特性与无障碍实践)
java·前端·javascript·ui·html·音视频
Moment36 分钟前
刷 Reddit 1 小时没结果?我用这个方法 10 秒挖出真实需求
前端·javascript·后端
折翅嘀皇虫37 分钟前
【无标题】steal_work_thread_pool
服务器·前端·算法
w_t_y_y39 分钟前
VUE组件配置项(零)概述
前端·javascript·vue.js
水云桐程序员40 分钟前
Web应用的分类
前端·javascript·vue.js·react.js·webkit
Jack N40 分钟前
2026 Web 网站性能优化指南
前端·性能优化
yqcoder41 分钟前
TypeScript 进阶:如何精准获取对象的所有 Key?
javascript·ubuntu·typescript
UXbot41 分钟前
支持移动端原型绘制的 AI 工具核心功能对比(2026):5 款主流平台能力横向评测
前端·低代码·ui·交互·原型模式·web app
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_54:(深入掌握 XSLTProcessor API)
前端·javascript·ui·html·媒体