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()
          }
        })
      }
    }
  },
相关推荐
独泪了无痕5 小时前
Vue调试神器:Vue DevTools使用指南
vue.js·前端工程化
优秀稳妥的JiaJi9 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架
好雨知时节t10 小时前
Pinia中defineStore的使用方法
vue.js
_Eleven10 小时前
Pinia vs Vuex 深度解析与完整实战指南
前端·javascript·vue.js
技术狂小子10 小时前
# 一个 Binder 通信中的多线程同步问题
javascript·vue.js
阿懂在掘金12 小时前
Vue 表单避坑(二):多个 v-model 同时更新,为什么数据丢了?
前端·vue.js
an3174213 小时前
解决 VSCode 中 ESLint 格式化不生效问题:新手也能看懂的配置指南
前端·javascript·vue.js
青青家的小灰灰16 小时前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试
SuperEugene16 小时前
路由与布局骨架篇:布局系统 | 头部、侧边栏、内容区、面包屑的拆分与复用
前端·javascript·vue.js
最强僚机斯内克16 小时前
Vue 3 + Vite 自动引入插件完整指南(unplugin-vue-components,unplugin-auto-import)
vue.js