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

效果图：

双向绑定 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 + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@',this.inputEmail + '@']}}}

简单的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;}