vue 实现v-model自动校验手机号

<template>
  <el-input
    v-model="mobile"
    :placeholder="placeholder"
    @change="validate"
    maxlength="11"
    show-word-limit
  ></el-input>
</template>

<script>
/* 中国大陆：开头1 3-9号段，后边跟9位数字
 *  台湾：09开头后面跟8位数字
 *  香港：9或6开头后面跟7位数字
 *  澳门：66或68开头后面跟5位数字
 */
let mobileReg = /^1[3-9]\d{9}$|^([6|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;

export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: ["value", "placeholder"],
  data() {
    return {
      mobile: "",
    };
  },

  watch: {
    value() {
      this.mobile = this.value;
    },
  },
  methods: {
    validate() {
      let v = this.mobile;
      if (!mobileReg.test(v) && v) {
        this.mobile = ""; // 清内容
        this.$message.error("请输入正确的手机号");
        this.$emit("input", "");
      }
      this.$emit("change", this.mobile);
    },
  },
};
</script>