vue3/vue2中自定义指令不可输入小数点.

javascript 复制代码
import { directive } from 'vue'

const noDecimal = {
  mounted(el) {
    el.addEventListener('keypress', (e) => {
      if (e.key === '.') {
        e.preventDefault()                          
      }
    })
  }
}

// 使用自定义指令
directive('no-decimal', noDecimal)
  • 使用 标签上添加 v-no-decimal
javascript 复制代码
    <el-input type="text" v-model="value" v-no-decimal placeholder="请输入..." > </el-input>
v3 指令生命周期
v2指令生命周期 官网
vue2中mounted 替换成bind
javascript 复制代码
  directives: {
    'no-decimal': {
      bind: (el) => {
        el.addEventListener('keypress', (event) => {
          if (event.key === '.') {
            event.preventDefault()
          }
        })
      }
    }
  },
相关推荐
呆子小木心39 分钟前
Vue2或Vue3项目引用百度地图
javascript·vue.js·typescript·前端框架·html5
UI设计兰亭妙微3 小时前
资金运营管理监控系统交互设计、UI设计及VUE开发
vue.js·ui·交互
王子肥波3 小时前
🚀 TabTab Admin:一款现代化的 Vue 3 后台管理系统模板
vue.js
白开水丶4 小时前
vue3源码学习(五)ref 、toRef、toRefs、proxyRefs 源码学习
前端·vue.js·学习
不想秃头的程序员5 小时前
Vue3 子传父全解析:从基础用法到实战避坑
前端·vue.js·面试
简单Janeee6 小时前
[Vue 3 从零到上线]-第三篇:网页的指挥官——指令系统 (v-if, v-for, v-bind, v-on)
前端·javascript·vue.js
前端程序猿i6 小时前
第 7 篇:性能优化 —— 大量消息下的流畅体验
前端·vue.js·性能优化
Trae1ounG6 小时前
这是json
前端·javascript·vue.js
前端程序猿i8 小时前
第 8 篇:Markdown 渲染引擎 —— 从流式解析到安全输出
开发语言·前端·javascript·vue.js·安全
css趣多多8 小时前
resize.js
前端·javascript·vue.js