vue输入框智能提示 (vue2输入框只读属性)

先看效果图

再看具体实现

// html
<div class="input-div">
    <div class="hintBox" v-show="showHintBox">
        <div @click="setInput(mail)" class="hintItem" v-for="mail in emails" :key="mail">{{mail}}</div>
    </div>
    <input type="text" autocomplete="off" id="email" class="email-input" v-model="inputEmail" @input="showHintBox = true" placeholder="请输入你的邮箱">
</div>

// js
data: ()=>{
    return {
        // 邮箱
        inputEmail: '',
        showHintBox: true
    }
},
methods: {
    // 点击该邮箱后缀是补全文本框
    setInput: function(mail) {
        this.inputEmail = mail;
        this.showHintBox = false;
    }
},
computed: {
    emails () {
        if(!this.showHintBox){
            return [];
        };
        let returnEmail = [];
        let mailArr = ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"]; //邮件数组
        let inputEmail = this.inputEmail;
        // 如果inputEmail中没有任何东西，则不处理
        if (!inputEmail) return []
        // 考虑到用户自己要输@符号，如果@符号首次出现的位置大于等于第零个位置时，则不处理
        if (inputEmail.indexOf('@') > -1){
            let index = inputEmail.indexOf('@');
            let tempEmail = [inputEmail.substring(0, index), inputEmail.substr(index+1)];
            mailArr.forEach(function(mail){
                if(mail.indexOf(tempEmail[1]) > -1){
                    returnEmail.push(tempEmail[0] + '@' + mail);
                }
            });
        }else{
            mailArr.forEach(function(mail){
                returnEmail.push(inputEmail + '@' + mail);
            });
        }
        return returnEmail;
    }
},