Vue el-input 限制输入内容

🤔日常项目中经常遇到既要el-input的样式,又要el-input-number限制,所以需要绑定@input事件进行约束输入限制。

以下使用自定义指令进行约束el-input输入的值,便于后期统一管理和拓展。

预览
代码
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="./assets/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        输入框
        <el-input v-model="num" v-only-number></el-input>
        预览值
        <div>{{num}}</div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="./assets/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./assets/element-ui/lib/index.js"></script>

<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                num: ''
            }
        },
        directives: {
            onlyNumber: {
                inserted: function (el, binding, vnode) {
                    vnode.elm.addEventListener('input', function (e) {
                        // 取出原始值
                        let value = e.target.value.replace(/[^0-9]/g, '')
                        // 重置原始值
                        e.target.value = value
                        // 向上更新
                        vnode.componentInstance.$emit('input', value)
                    })
                }
            }
        }
    })

</script>

</html>

在线预览
https://linyisonger.github.io/H5.Examples/

源码仓库
https://github.com/linyisonger/H5.Examples.git

相关推荐
EndingCoder2 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang10 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol18 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero23 分钟前
微信131~140
开发语言·javascript·微信
然我28 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms9 小时前
前端项目集成lint-staged
前端·vue·lint-staged