🤔日常项目中经常遇到既要el-input的样式，又要el-input-number限制，所以需要绑定@input事件进行约束输入限制。
以下使用自定义指令进行约束el-input输入的值，便于后期统一管理和拓展。
预览
代码
<!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
![[图解]企业应用架构模式2024新译本讲解26-层超类型2](https://i-blog.csdnimg.cn/direct/d2b1488dad584e189fb30050e9b9769c.png)
