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()
          }
        })
      }
    }
  },
相关推荐
sheeta19981 小时前
Vue 前端基础笔记
前端·vue.js·笔记
前端那点事1 小时前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js
SwJieJie3 小时前
Day1 从 0 搭建 VueDemo Web Admin 项目环境:技术栈、插件链与自动化脚本全解析
前端·vue.js·学习
xuankuxiaoyao3 小时前
Vue.js 插槽、作用域插槽、商品、阶段案例
android·vue.js·flutter
EF@蛐蛐堂3 小时前
TanStack NPM攻击 揭秘及应对方案
前端·vue.js·npm·安全威胁分析
Cobyte3 小时前
11.响应式系统演进:深入剖析 computed 实现原理与性能优化实践(Vue3.3)
前端·javascript·vue.js
极梦网络无忧3 小时前
我开源了一个 Vue 3 动态表单组件库 —— real-vue3-easy-form
前端·vue.js·开源
MXN_小南学前端3 小时前
Vue + Quill:富文本的添加、传输、展示逻辑,以及 csReplyQuill 组件封装
前端·vue.js
qq_381338503 小时前
Vue3 组合式函数设计模式:从基础封装到高级复用实战
前端·vue.js·设计模式
adminwolf4 小时前
自研企业微信SCRM系统源码独立部署(Golang+Vue.js)
前端·vue.js·企业微信