input获取焦点显示内容，失去焦点隐藏内容。点击内容获取点击值显示内容

鼠标移入电话号码。获取焦点，显示下面的电话号码的列表。

失去焦点。隐藏下面的电话号码列表。

移入点击一个电话号码。得到电话号码列表隐藏。

此时会出现一个问题：

当我点击电话号码列表的时候，input也是失去焦点。他没有获取点击的内容就执行了失去焦点的隐藏操作。

 

我这里就写了在失去焦点的时候写了一个延时setTimeout。如果是点击电话列表的，就先去执行那个函数事件了

//鼠标获取焦点和移入显示
        show(){
            clearTimeout(this.timer);
            this.optionsPhoneShow=true;
        },
//鼠标移出隐藏
        hide(){
            let that=this;
             this.timer = setTimeout(function(){//500ms以后在隐藏。因为这样点击了电话列表还是执行的下面的getPhone函数。然后才走的这里。
             that.optionsPhoneShow=false;
          },500);
        },

//点击电话列表获取内容。隐藏列表

 getPhone(item){
            this.loginform.username=item;
            this.optionsPhoneShow=false;
        },

<el-input v-model="loginform.username" clearable type="tel" placeholder="手机号码" maxlength="13" @focus="show()"  @blur="hide()"  @keyup.native="addBlank($event)"  ></el-input>
         <ul class="optionsPhone" v-if="optionsPhone.length>0&&optionsPhoneShow" @touchmove="show()" >
             <li @click="getPhone(item)" v-for="item in optionsPhone.slice(0,10)" >{{item}}</li>
         </ul>