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()
          }
        })
      }
    }
  },
相关推荐
狗哥哥1 天前
🔥 Vue 3 项目深度优化之旅:从 787KB 到极致性能
前端·vue.js
DarkLONGLOVE1 天前
Vue组件使用三步走:创建、注册、使用(Vue2/Vue3双版本详解)
前端·javascript·vue.js
DarkLONGLOVE1 天前
手把手教你玩转Vue组件:创建、注册、使用三步曲!
前端·javascript·vue.js
Irene19911 天前
Vue2 与 Vue3 自定义事件实现对比
vue.js
zhengxianyi5151 天前
ruoyi-vue-pro优化——如何将一个模块快速变成一个独立的应用进行开发,部署,管理
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
zhengxianyi5151 天前
ruoyi-vue-pro优化——让菜单支持多个参数,一键直达【经营分析】、【生产报表】、【销售报表】
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
bug总结1 天前
身份证号脱敏的正确实现
前端·javascript·vue.js
xkxnq1 天前
第二阶段:Vue 组件化开发(第 19天)
前端·javascript·vue.js
虚诚1 天前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
CUYG1 天前
v-model封装组件(定义 model 属性)
前端·vue.js