vue的元素的@blur和元素的@click事件冲突了，如何解决？类似谷歌搜索时点击搜索框出现搜索记录的功能

  • Z时代
  • 2024-02-14
  • 分类：IT

vue的元素的@blur和元素的@click事件冲突了，如何解决？类似谷歌搜索时点击搜索框出现搜索记录的功能

是一个类似谷歌搜索的历史记录功能，需要在input失去聚焦后关闭历史记录的显示。同时，历史记录支持删除
代码如下

<div class="miner-search">
      <span class="input-box">
        <input v-debounce:300ms="filterMinerList" v-model="minerName" type="text" :placeholder="$t('miner.searchMiner')" @focus="showHistory = true" @blur="showHistory = false" />
        <i class="el-icon-circle-close" :style="minerName ? 'display:block' : 'display:none'" @click="filterMinerList(null)"></i>
        <i class="el-icon-search"></i>
      </span>
      <div class="search-history" v-show="showHistory">
        <p :class="hoverIndex === index ? 'history-item hover-item' : 'history-item'" v-for="(item, index) in searchList" :key="index" @mouseover="hoverIndex = index">
          <i class="el-icon-time"></i>
          <span @click="filterMinerList(item)">{{ item }}</span>
          <el-button type="text" icon="el-icon-close" @click="delHistory(index)"></el-button>
        </p>
      </div>
    </div>

<input>元素的@blur事件会优先触发导致子元素<el-button>的@click的delHistory无法触发。如何解决

回答：

最简单解决方法，把click改成mousedown

回答：

你可以在blur里加上timeout去延迟关闭

回答：

search-history 这个DIV你应该用两个状态来控制，而不是一个。
例如： blurShow 和 clickShow

focus事件触发blurShow = true
blur事件只触发blurShow = false
click触发clickShow = true

如果blurShow === false && clickShow === false 则关闭

这时候历史搜索框就关不了，除非focus的时候重置clickShow = false
体验想更好一点的话，需要做一个点击除了.miner-search 元素之外的元素，重置 blurShow = false 并且 clickShow = false 这样就可以关了。

回答：

el-button 加上 @mousedown.native.prevent

以上是 vue的元素的@blur和元素的@click事件冲突了，如何解决？类似谷歌搜索时点击搜索框出现搜索记录的功能 的全部内容， 来源链接： utcz.com/p/936578.html

回到顶部