Vue el-input 限制输入内容

🤔日常项目中经常遇到既要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>