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()
          }
        })
      }
    }
  },
相关推荐
KnowWhere1 小时前
Vue3 调试技巧:一键挂载组件实例到 Window(仅开发环境生效)
vue.js
A南方故人2 小时前
vue3常用指令以及注册
前端·javascript·vue.js
helloweilei2 小时前
Vue 3 中 <script setup>顶层 await与 <Suspense>的结合使用
vue.js
Aolith3 小时前
从0到1实现帖子上传图片:我是如何复用头像上传逻辑的
vue.js·图片资源
懂懂tty4 小时前
Vue3 手写响应式原理
前端·vue.js
zhulangfly4 小时前
# Spring Boot + MinIO + MySQL + Vue 实现视频管理与流式播放
vue.js·spring boot·mysql
就爱瞎逛5 小时前
解决Ant Design Vue 日期选择器中文不生效
前端·javascript·vue.js
知彼解己5 小时前
前端发布流程总结(Vue + Element 项目)
前端·javascript·vue.js
D_jing208 小时前
Vue 3 + Element Plus 重置el-drawer样式失效
前端·javascript·vue.js
__log8 小时前
Vue 3 与 React 18+ 核心技术深度对比:从源码到实战
前端·vue.js·react.js