Vue 开发邮箱输入组件

Email.vue

<template>
  <div class="email2" :class="!!error?'email2__error':''">
    <div class="email-box" ref="email-box">
      <el-tag
        :key="tag"
        size="mini"
        style="margin-right: 2px;margin-bottom: 1px;"
        type="info"
        v-for="tag in activeList"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
        style="width: 180px;"
        size="mini"
        v-model="email"
        ref="saveTagInput"
        @keyup.enter.native="handleInputConfirm"
        @keyup.delete.native="handleDeleteConfirm"
        @blur="handleInputConfirm"
        @input.native="handleInput"
        placeholder="请输入邮箱"
      >
      </el-input>
    </div>
    <div v-if="!!error" class="tip">{{error}}</div>
  </div>
</template>

<script>
import { isEmail } from '@_public/utils'
export default {
  name: 'Email2',
  props: {
    activeList: Array,
    // 邮箱是否必填
    required: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'activeList',
    event: 'valueEvent'
  },
  created () {
  },
  data () {
    return {
      emailList: [],
      inputVisible: false,
      email: '',
      // 默认点击一次backspace就会从activeList中删除最后一个
      deleteCount: 1,
      error: '',
      isPaste: false
    }
  },
  computed: {
  },
  mounted () {
    this.$refs['email-box'].onclick = function () {
      this.classList.add('email-box--active')
      const input = this.querySelector('input')
      input.focus()

      input.onblur = () => {
        this.classList.remove('email-box--active')
      }
    }

    const me = this
    // 监听粘贴事件
    document.addEventListener('paste', function (event) {
      me.isPaste = true
      let text = (event.clipboardData || window.clipboardData).getData('text')
      let list = text.split(/,|;|，|；/).map(e => e.trim()).filter(e => e && isEmail(e))
      list = Array.from(new Set(me.activeList.concat(list)))
      me.$emit('valueEvent', list)
    })
  },
  methods: {
    handleClose (tag) {
      this.activeList.splice(this.activeList.indexOf(tag), 1)
    },

    handleInput (e) {
      if (this.isPaste) {
        this.error = ''
        this.email = ''
        this.isPaste = false
      } else {
        const s = e.data
        if (s === ',' || s === '，') {
          this.handleInputConfirm()
        }
        this.error = ''
      }
    },

    handleInputConfirm () {
      if (this.required && this.activeList.length === 0 && !this.email) {
        this.error = '请输入邮箱'
      } else {
        this.email && this.validateEmail()
      }
    },

    validateEmail () {
      const email = this.email.trim().replace(/(,$)|(，$)/g, '')

      const isExist = (n) => {
        return this.activeList.some(v => v === n)
      }

      if (isEmail(email)) {
        if (!isExist(email)) {
          this.activeList.push(email)
          this.email = ''
          this.deleteCount = 1
          this.error = ''
        } else {
          this.error = '邮箱已存在'
        }
      } else {
        this.error = '邮箱格式错误'
      }
    },

    handleDeleteConfirm () {
      if (!this.email) {
        if (this.deleteCount === 1) {
          this.activeList.pop()
        } else {
          this.deleteCount -= 1
        }
      }
    },

    /**
     * @function 验证邮箱是否输入通过，没有error就代表通过
     * */
    validation () {
      this.handleInputConfirm()
      return !this.error
    }
  },
  watch: {
    activeList (val) {
      this.$emit('valueEvent', val)
    },
    email (newVal, oldVal) {
      if (!newVal && oldVal.length === 1) {
        // 在email为空后还需点一次backspace才能删除
        this.deleteCount = 2
      }
    }
  }
}
</script>

<style lang="scss">
  .email-box{
    display: flex;
    /*margin-top: 4px;*/
    padding: 1px;
    flex-wrap: wrap;
    border-radius: 5px;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid #d9d9d9;
    min-height: 32px;
    max-height: 160px;
    overflow-y: auto;
    cursor: text;
    &:hover{
      border-color: #bfbfbf;
    }
    div.el-input.el-input--mini {
      flex: auto;
      height: 28px;
    }
    .el-input__inner{
      border: none!important;
    }
  }
  .email-box--active{
    border-color: #268DFF!important;
  }

  .email2 {
    >.tip{
      line-height: 1.5;
      font-size: 12px;
      color: #fa2a31;
    }
    &.email2__error {
      >.email-box {
        border: 1px solid #fa2a31!important;
      }
    }
  }
</style>

utils.js文件中有isEmail方法

export const isEmail = (val) => {
  let regEmail = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/
  return regEmail.test(val)
}

效果截图