vue的自定义指令

本文以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-指令名

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

你可能感兴趣的:(vue的自定义指令)