前端mac地址组件

<template>
  <div >
<!--      <el-form-item
          :prop="input"
          :rules="rulesCheck.MAC"
      >-->
       <el-input
         @keydown.native="wat($event)"  @change="wat2" :maxlength="17"  v-model="input" placeholder="输入MAC地址"></el-input>
 <!--     </el-form-item>-->

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        input:this.value,
    }
  },
    props: {
        value: {
            type: String
        }//接受外部v-model传入的值
    },
    watch:{
        //判断下拉框的值是否有改变
        value(val) {
            this.input = val;//②监听外部对props属性value的变更，并同步到组件内的data属性svalue中
        },
        input(val, oldVal) {
                this.$emit('input', this.input);
        },
    },
  mounted(){
  },
  methods:{
      wat2(){
          this.$emit('input', this.input);
          if(this.input.length == '2' || this.input.length == '5' || this.input.length == '8'|| this.input.length == '11'|| this.input.length == '14') {
   
                  this.input = this.input + '-'
                  this.$emit('input', this.input);
                  return;

              if (this.input.length == '3' || this.input.length == '6' || this.input.length == '9' || this.input.length == '12' || this.input.length == '15') {
                  this.input = this.input.slice(0, this.input.length - 1)
              }
              return
          }
      },
      //这个方法是老版本已废弃
    wat(val){
        this.$emit('input', this.input);
      if(this.input.length == '2' || this.input.length == '5' || this.input.length == '8'|| this.input.length == '11'|| this.input.length == '14'){
        if(val.keyCode !== 8&&val.keyCode !== 16&&val.keyCode !== 186&&val.keyCode !== 189&&val.keyCode !== 229){
          this.input = this.input + '-'
            this.$emit('input', this.input);
          return ;
        }
        if(this.input.length == '3'||this.input.length == '6'||this.input.length == '9'||this.input.length == '12'||this.input.length == '15'){
          this.input = this.input.slice(0,this.input.length-1)
        }
        return
      }
   /*   if(val.keyCode == 8 &&  ){
        this.input = this.input.slice(0,this.input.length-1)
      }
      if(val.keyCode == 8 && this.input.length == '6' ){
        this.input = this.input.slice(0,this.input.length-1)
      }
      if(val.keyCode == 8 && this.input.length == '9' ){
        this.input = this.input.slice(0,this.input.length-1)
      }*/
   },

    check_num(){
     console.log(this.input.replace(/[^a-zA-0-9]/g, ''))
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>