时间戳

首页 > 解决方案 > 当单击外部 div 时，vuejs 停止传播单击

laravel - 当单击外部 div 时，vuejs 停止传播单击

问题描述

我正在尝试创建搜索显示隐藏功能。我有一个显示搜索栏的单击事件，但是如果我单击放置中的某个位置，它会再次被删除。我试过了，click.stop但它不起作用。我在 laravel 项目中使用 vue.js。

这是我的代码

<template>
<div>
    <div class="menu_srch d-flex" @click.stop="dos">
        <i class="fa fa-search search_btn"></i>

        <div class="header_serch " v-if="showSearch">
            <div class="header_serch_input">
                <input type="" name="" placeholder="Search">
            </div>
            <div class="header_serch_i">
                <i class="fa fa-search"></i>
            </div>
        </div>
    </div>

</div>
</template>

<script>
export default {
data(){
    return {
        showSearch : false,
    }
},
methods: {
    dos(){
        this.showSearch = !this.showSearch
    }
  },
}
</script>

使用 click.self 甚至不起作用.. dos 方法不运行时click.self is used.

Vue.js 版本：“^2.6.11”

标签： laravelvue.jsvuejs2

解决方案

您可以捕获单击事件结束以停止向下一级的传播。

<template>
  <div>
    <div class="menu_srch d-flex" @click="dos">
      <i class="fa fa-search search_btn"></i>
      <div @click.stop class="header_serch" v-if="showSearch">
        <div class="header_serch_input">
          <input type name placeholder="Search">
        </div>
        <div class="header_serch_i">
          <i class="fa fa-search"></i>
        </div>
      </div>
    </div>
  </div>
</template>

或者您需要重新构建您的模板。

<template>
  <div>
    <div class="menu_srch d-flex" @click="dos">
      <i class="fa fa-search search_btn"></i>
    </div>
    <div class="header_serch" v-if="showSearch">
      <div class="header_serch_input">
        <input type name placeholder="Search">
      </div>
      <div class="header_serch_i">
        <i class="fa fa-search"></i>
      </div>
    </div>
  </div>
</template>

推荐阅读