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()
          }
        })
      }
    }
  },
相关推荐
秃头小傻蛋16 分钟前
Vue 项目中条件加载组件导致 CSS 样式丢失问题解决方案
前端·vue.js
复苏季风24 分钟前
vite里把markdown文件渲染成vue组件
vue.js·markdown
streaker30326 分钟前
Vue3 + TSX 封装 el-table:还原 Antd 风格的 Columns 配置
vue.js·element
柯南95272 小时前
Vue 3 响应式系统源码解析
vue.js
文艺理科生2 小时前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
夏小花花2 小时前
vue3 ref和reactive的区别和使用场景
前端·javascript·vue.js·typescript
前端小巷子3 小时前
Vue 自定义指令
前端·vue.js·面试
Stringzhua4 小时前
Vue中的数据渲染【4】
css·vue.js·css3
草梅友仁14 小时前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
萌萌哒草头将军16 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js