点击输入文本框时自动提示邮箱后缀（vue项目）

最新推荐文章于 2024-07-31 11:52:11 发布

痴心的萝卜

最新推荐文章于 2024-07-31 11:52:11 发布

阅读量4.7k

点赞数 1

分类专栏： vue 文章标签：自动提示邮箱后缀

本文链接：https://blog.csdn.net/qq_36826618/article/details/102157621

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
双向绑定 inputEmail,如果没使用element框架，把有 el- 的自己替换回来

          <el-input v-model="inputEmail" placeholder="请输入邮箱账号" clearable prefix-icon="el-icon-user"></el-input>
          <div class="hintBox">
            <div @click="setInput(mail)" class="hintItem"  v-for="mail in emails" :key="mail">{{mail}}</div>
          </div>

export default {
  name: 'login',
  data () {
    return {
      inputEmail: ''
    }
  },
  methods: {
    // 点击该邮箱后缀是补全文本框
    setInput (mail) {
      this.inputEmail = mail
    }
  },
  computed: {
    emails () {
      // 如果inputEmail中没有任何东西，则不处理
      if (!this.inputEmail) return []
      // 考虑到用户自己要输@符号，如果@符号首次出现的位置大于等于第零个位置时，则不处理
      if (this.inputEmail.indexOf('@') > -1) return []
      return [
        this.inputEmail + '@163.com',
        this.inputEmail + '@126.com',
        this.inputEmail + '@0355.net',
        this.inputEmail + '@263.net',
        this.inputEmail + '@3721.net',
        this.inputEmail + '@qq.com',
        this.inputEmail + '@yahoo.com',
        this.inputEmail + '@gmail.com',
        this.inputEmail + '@msn.com',
        this.inputEmail + '@hotmail.com',
        this.inputEmail + '@aol.com',
        this.inputEmail + '@ask.com',
        this.inputEmail + '@live.com',
        this.inputEmail + '@yeah.net'
      ]
    }
  }
}

简单的css样式，仅供参考

  .hintBox {
    width: 100%;
    max-height: 120px;
    overflow-y:scroll;
    overflow-x: auto;
    position: absolute;
    z-index: 999;
    background-color: #fff;
  }
  .hintItem {
    margin-top: 2px;
    cursor:pointer;
    margin-left: 45px;
    font-size: 13px;
    color: #898989;
  }