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()
          }
        })
      }
    }
  },
相关推荐
布局呆星24 分钟前
Vue Router 笔记(二):正则路由、组件通信与动态路由
前端·javascript·vue.js
hexu_blog1 小时前
前端vue后端springboot如何实现图片格式转换
前端·javascript·vue.js
代码煮茶1 小时前
Vue3 项目规范实战 | ESLint+Prettier+Git Hooks 搭建前端代码规范体系
前端·javascript·vue.js
hexu_blog2 小时前
前端vue 后端springboot如何实现图片去水印
前端·javascript·vue.js
spmcor2 小时前
前端 RBAC 权限控制实战:从零实现动态路由与细粒度按钮权限
vue.js
spmcor2 小时前
Vue 2 vs Vue 3:核心差异深度剖析与迁移指南
vue.js
Asurplus4 小时前
【VUE】17、使用JSEncrypt对数据加解密
javascript·vue.js·jsencrypt·rsa
hexu_blog17 小时前
vue+java实现图片批量压缩
java·前端·vue.js
parade岁月18 小时前
开源一个 Vue 3 Table:API 学 antdv、主题学 Nuxt UI
前端·vue.js
吹牛不交税19 小时前
tree-transfer-vue3 前端插件安装问题解决(--legacy-peer-deps)(其他插件可考虑)适用
前端·javascript·vue.js