美文网首页
vue的自定义指令

vue的自定义指令

作者: 染指悲剧 | 来源:发表于2020-05-10 17:04 被阅读0次

    本文以element为例

    1.创建directive.js文件,并在main.js中引入这个文件,然后就可以使用自定义指令了,

    2.在directive.js文件中写上自己的指令,比如写一个只能输入数字的输入框指令

    import Vue from 'vue'

    Vue.directive('Int', {

        inserted: function (el) {

            const input = el.querySelector('.el-input__inner'); //注意这里element与ant不同   ant为 const input = el.querySelector(el);

            input.onkeyup = function (e) { 

                if (input.value.length === 1) {

                    input.value = input.value.replace(/[^0-9]/g, '')

                 }else{

                    input.value = input.value.replace(/[^\d]/g, '')

                }     

            }

            input.onblur = function (e) {

                if (input.value.length === 1) {

                    input.value = input.value.replace(/[^0-9]/g, '')

                  }else{

                      input.value = input.value.replace(/[^\d]/g, '')

                  }

                }

            }

        });

    3.然后就可以使用了    v-指令名

    <el-input v-model="listOrder" v-Int></el-input>

    4.自定义金额指令,最多两位小数,点击这里

    相关文章

      网友评论

          本文标题:vue的自定义指令

          本文链接:https://www.haomeiwen.com/subject/jkbjnhtx.html