首页 > 其他分享 >vue使用directives V-指令限制输入框内容

vue使用directives V-指令限制输入框内容

时间:2023-07-29 10:33:52浏览次数:32  
标签:vue re 输入框 let && directives charCode charcode

在一些表单中输入框需要前端加入限制,比如需要用户输入的是非负数的整数,这时候我们可以使用v-指令只要在input里加上就行。不需要一个个的去校验,省去的校验的代码

<el-input-number v-model="typeModel.jyCheckNum" clearable  placeholder="请输入不合格数"   size="small"   v-enterNumber :controls="false"/>

和data同级

directives: {
        enterNumber: {
            inserted(el, binding, vnode, oldVnode) {
                el.addEventListener('keypress', function (e) {
                    e = e || window.event
                    let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
                    let re = /^[0-9]\d*$/
                    if (
                        !re.test(String.fromCharCode(charcode)) &&
                        charcode > 9 &&
                        !e.ctrlKey
                    ) {
                        if (e.preventDefault) {
                            e.preventDefault()
                        } else {
                            e.returnValue = false
                        }
                    }
                })
            },
        }
    },

标签:vue,re,输入框,let,&&,directives,charCode,charcode
From: https://blog.51cto.com/u_16204378/6890757

相关文章

  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况,好奇怎么通过ref取到render中jsx里的节点,一开始试了以下的尝试,结果是undefined的:import{defineComponent,ref,onMounted}from"vue";exportdefault......
  • 学习vue又一天
    学习vue又一天,终于把样式、表单、等全部看完了,真的是很简单,都不知道怎么形容,可能是有一定基础的学习比较快吧,然后看了axios,感觉与Ajax的差别不是太大,估计是没有太深入了解的原因,这块我先简单看了一下,然后等后面项目开始的时候再看混合式api看了几次,说实话没看太明白,计划先略过......
  • vue3拖拽插件vue-draggable-next
    -基于sortablejs;npm地址:https://www.npmjs.com/package/vue-draggable-next配置项:https://github.com/SortableJS/Sortable#options import{VueDraggableNextasDraggable}from'vue-draggable-next';components:{HeaderTitle,TitlePanel,Draggable},......
  • vue3跨越
    在vue3项目中使用跨域1.服务器代理server:{port:8080,//设置服务启动端口号open:true,//设置服务启动时是否自动打开浏览器cors:true,//允许跨域//设置代理,根据我们项目实际情况配置proxy:{'/api':{//apiTest是自行设置的请求前......
  • VuePress@next 使用数学公式插件
    VuePress@next使用数学公式插件搞了一个VuePress1.0的现在升级了一下,但是使用数学公式的插件老报错啊!经过不懈努力,终于搞定了。现在记录一下。VuePress介绍VuePress是一个以Markdown为中心的静态网站生成器。你可以使用Markdown来书写内容(如文档、博客等),然后VuePress......
  • Vuex基础入门
    一、什么是vuex概念专门在vue中实现集中式状态/数据管理的Vue插件,对Vue中多组件共享数据进行集中管理(读取、修改),同时也属于组件通信方式的一种,并且适用于任意组件间的通信什么时候使用Vuex多个组件依赖同一个状态来自不同组件的行为需要变更同一状态多个组件需要......
  • vue导出自定义的html
    vue导出.html文件HTML页面由.css、htmlDom标签组成,将css设置成js通过export导出,htmlDom可以通过$el.innerHTML获得,也可通过document.getElementById('id')获得。然后构造html页面,使用createObjectURL创建一个文件流下载。代码如下:import{resumecss}from'@/styles/download.......
  • Vue2 & Vue3生命周期对比
    Vue2生命周期图示  Vue3生命周期图示  二者对比 ......
  • 看看Vue中如何封装一个自动化注册全局组件
    在项目的开发过程中,我们常常会去封装一些比较常用的全局组件,但是每添加一个组件就需要手动在main.js引入注册,不仅麻烦还代码量多,着实让人心烦。所以干脆封装一个自动化注册全局组件。1、自定义全局组件文件夹在src下新建一个globalComponents,用于存放全局组件,并新建一个组件,例......
  • vue-cli构建Vue3项目
    1、node环境检查node-v//查询Node版本 2、vue-cli版本检查vue-V//查询vue-cli版本npmuninstall-gvue-cli//卸载旧版vue-clinpminstall-gvue-cli//旧版vue-cli2npminstall-g@vue-cli//vue-cli3  其他命令:vue-V//查询vue-cli脚手架版本np......