Próbuję utworzyć funkcję Wyszukiwania Show Hide. Mam wydarzenie kliknięcia, które pokazuje pasek wyszukiwania, ale jeśli klikam gdzieś w umieszczeniu ponownie usunięty. Próbowałem z click.stop, ale to nie działa. Używam Vue.js wewnątrz projektu Lavel.

Oto mój kod

<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>

przy użyciu kliknięcia. nie działa nawet .. Metoda DOS nie działa, gdy click.self is used.

VUE.JS Wersja: "^ 2.6.11"

0
Hkm Sadek 29 lipiec 2020, 16:29

1 odpowiedź

Najlepsza odpowiedź

Możesz przechwytywać koniec zdarzenia kliknięć, aby zatrzymać poziom propagacji na dół.

<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>

Lub musisz restrukturyzować szablon.

<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>
1
Pierre Said 29 lipiec 2020, 14:21