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()
          }
        })
      }
    }
  },
相关推荐
90后的晨仔21 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
C++、Java和Python的菜鸟1 天前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花1 天前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
用户841794814561 天前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
Tian_Hang1 天前
Vue3 父子组件通讯
前端·javascript·vue.js
C++、Java和Python的菜鸟1 天前
第13章 前端Web实战(Tlias案例)
前端·javascript·vue.js
qq83443101 天前
Luckysheet,在Vue 等框架中初始化失败(白屏),如何修复
前端·javascript·vue.js
满栀5852 天前
Vue.js 接口封装最佳实践:从基础到高级
前端·javascript·vue.js
java1234_小锋2 天前
Vue3专题 - 事件处理
javascript·vue.js
宿6742 天前
vue3-DOM树
前端·javascript·vue.js