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()
          }
        })
      }
    }
  },
相关推荐
快乐小土豆~~4 分钟前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
儒雅的烤地瓜17 分钟前
Vue | Vue3中<script setup>用法详解
vue.js·vue3·选项式api·组合式 api·setup方法·<script setup>
小李子呢021137 分钟前
前端八股2---Proxy 代理
前端·javascript·vue.js
军军君011 小时前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
Hello--_--World3 小时前
Vue2的 双端 diff算法 与 Vue3 的 快速diff 算法
前端·vue.js·算法
gongzemin3 小时前
怎么在VS Code 调试vue2 源码
前端·vue.js
烟话63 小时前
Vue3响应式原理【通俗理解】
前端·javascript·vue.js
军军君014 小时前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
踩着两条虫4 小时前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程
xiaotao1315 小时前
Vite 与 Webpack 开发/打包时环境变量对比
前端·vue.js·webpack