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()
          }
        })
      }
    }
  },
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一只小风华~9 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
切糕师学AI10 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
书源12 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
计算机学姐12 小时前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
随风飞翔的胖子13 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
幻灵尔依13 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子13 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
小菜全15 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js