封装 -- vue自定义修饰符

export default {

  phone(el, binds) {
    if (!/^1[3-9]\d{9}$/.test(el.value)) {
      el.style.color = '#f00'
    } else {
      el.style.color = '#000'
    }
  },
  min(el, binds) {
    if (binds.value.min) {
      if (el.value.length <= binds.value.min) {
        el.style.color = '#f00'
      } else {
        el.style.color = '#000'
      }
    }
  }

}

<div id="app">
  <input type="text" v-model="phone" v-validate.phone>
  <hr>
  <input type="text" v-model="username" v-validate="{min:2}">
</div>

<script type="module">
  import valid from './js/Valid.js'

  Vue.directive('validate', (el, binds) => {
    // map forEach
    Object.keys(binds.modifiers).forEach(fnName => valid[fnName](el, binds))
    // 只有前面操作有值时才进行循环  它有undefined可能   js 短语运算   ts 断言
    binds.value && Object.keys(binds.value).forEach(fnName => valid[fnName](el, binds))
    /* if(binds.value){
      Object.keys(binds.value).forEach(fnName => valid[fnName](el, binds))
    } */
    // 获取对象中的value值，返回一个数组
    // Object.values()
    // 获取地象中的key值，返回一个数组
    // Object.keys()
    // es6 判断是否为数组 true/false
    // Array.isArray(变量)
  })

  const vm = new Vue({
    el: '#app',
    data: {
      phone: '',
      username: ''
    }

  })
</script>