it网站开发,浮梁网站推广,wordpress 萌,石家庄房产信息网查询系统#x1f914;日常项目中经常遇到既要el-input的样式#xff0c;又要el-input-number限制#xff0c;所以需要绑定input事件进行约束输入限制。
以下使用自定义指令进行约束el-input输入的值#xff0c;便于后期统一管理和拓展。
预览 代码
!DOCTYPE html
ht…日常项目中经常遇到既要el-input的样式又要el-input-number限制所以需要绑定input事件进行约束输入限制。
以下使用自定义指令进行约束el-input输入的值便于后期统一管理和拓展。
预览 代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href./assets/global.css!-- 引入样式 --link relstylesheet href./assets/element-ui/lib/theme-chalk/index.css
/headbodydiv idapp输入框el-input v-modelnum v-only-number/el-input预览值div{{num}}/div/div
/body
!-- import Vue before Element --
script src./assets/vue2/dist/vue.js/script
!-- import JavaScript --
script src./assets/element-ui/lib/index.js/scriptscriptnew 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
