vue內input框限制只能輸入手機號

前端開發中常常遇到手機號輸入的狀況，而產品每每會要求只能輸入手機號，禁止混入其餘內容；
最近整理了下以前幾個項目的方法，找到一個在vue項目中的一個實用方法，分享一下；

這個方法使用的是 vue 自定義指令，以前一直沒咋用，最近研究了下發現很實用；

/* 自定義指令 */
    directives: {
      numberOnly: {
        bind: function(e) {
          e.handler = function() {
            e.value = e.value.replace(/\D+/, '')
          }
          e.addEventListener('input', e.handler)
        },
        unbind: function(e) {
          e.removeEventListener('input', e.handler)
        }
      }
    },

<input 
     v-model="phone" 
     name="phone" 
     pattern="[0-9]*"  
     v-number-only 
     class="y_input" 
     type="tel" 
     maxlength="11" 
     placeholder="請輸入手機號">

分享一下，也算是個筆記