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()
          }
        })
      }
    }
  },
相关推荐
Python私教1 天前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源
ayqy贾杰1 天前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
李白的天不白1 天前
vue 数据格式问题
前端·vue.js·windows
小白蒋博客1 天前
【ai开发段永平投资理财的知识图谱网站】第一天:搭 Vite + Vue 项目,跑通 Hello World
vue.js·人工智能·trae
@yanyu6661 天前
登录注册功能-明文
vue.js·springboot
滕青山2 天前
在线PDF拆分工具核心JS实现
前端·javascript·vue.js
光影少年2 天前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架
李白的天不白2 天前
VUE依赖配置问题
前端·javascript·vue.js
小智社群2 天前
获取贝壳新房列表
前端·javascript·vue.js
一 乐2 天前
茶叶商城|基于springboot + vue茶叶商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·茶叶商城系统