vue+elmentui 实现v-model自动校验电子邮箱

<template>
  <el-input :placeholder="placeholder" @change="validate" v-model="email"></el-input>
</template>

<script>
const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: ["value", "placeholder"],
  data() {
    return {
      email: "",
    };
  },
  watch: {
    value(val) {
      this.email = val;
    },
  },
  methods: {
    validate() {
      let v = this.email;
      if (!regEmail.test(v) && v) {
        this.email = ""; // 清内容
        this.$message.error("请输入正确的邮箱");
        this.$emit("input", "");
      }
      this.$emit("change", this.email);
    },
  },
};
</script>