点击事件失效？绑不上点击事件

Posted 2020-12-20 jiayouba

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击事件失效？绑不上点击事件相关的知识，希望对你有一定的参考价值。

　　今天要给登录界面账号输入加个历史账号记录的小功能：每次登录过后记录下账号，下次登录输入账号时，点击账号input框，下弹出历史账号以供选择。

但是发现绑在历史账号标签上的点击事件不得行，感觉就像是点击事件失效了？或者绑不上点击事件。

　　逻辑是这样的：

　　　　　　　　1、当账号input框获取焦点时，showHisAccRec 改为 true，即渲染弹出历史账号记录。

　　　　　　　　2、当用户点击某一项历史账号时，把这项值赋值给账号input框。同时账号input框会因为点击自动失去焦点，就把showHisAccRec 改为 false，即收起历史账号记录。

　　很简单。

　　这是标签：

<input
    class="input-account"
    type="number"
    v-model="userId"
    placeholder-style="mine-placeholder"
    placeholder="账号/手机号"
    data-key="userId"
    @input="inputChange"
    @blur="blurChange"
    @focus="focusChange"
    :class="{ error: isError }"
/>
<input type="text" name="username" style="z-index: -1; position: absolute;" />
<view class="input-accounts-records" v-if="showHisAccRec">
    <!-- <template v-for="(account, index) in allAccountRecords.account">
            <text class="iar-account" @click="changeUserId(index)">{{account}}</text>
        </template> -->
<view class="iar-account" v-for="(account, index) in allAccountRecords.account" @click="changeUserId(index)" :key="index">{{ account }}</view>
</view>

　　这是函数：

blurChange(e) {
    const key = e.currentTarget.dataset.key;
    if (key === ‘userId‘) {
        this.showHisAccRec = false;
    }
            
},
focusChange(e) {
    const key = e.currentTarget.dataset.key;
    if (key === ‘userId‘) {
        this.showHisAccRec = true;
    }
},
changeUserId(index) {
    this.userId = this.allAccountRecords.account[index];
},