Bagaimana untuk menyembunyikan elemen semasa dalam vuejs

Kaedah pelaksanaan menyembunyikan elemen semasa dalam vuejs: 1. Selepas halaman dipasang, dengar acara klik global 2. Dapatkan elemen yang sedang diklik dan dapatkan atribut elemen semasa itu sendiri mengikut keperluan; 3. Tentukan klik semasa Sama ada elemen itu sama dengan elemen yang hendak disembunyikan 4. Jika elemen yang sedang diklik tidak sama dengan elemen yang hendak disembunyikan, ia akan disembunyikan.

Persekitaran pengendalian artikel ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Bagaimana untuk menyembunyikan elemen semasa dalam vuejs?

Vue melaksanakan klik di luar elemen semasa untuk menyembunyikan elemen semasa (idea pelaksanaan)

1

2. kitaran hayat terpasang

3 Idea pelaksanaan

Selepas halaman dipasang, pantau peristiwa klik global<.>

Dapatkan elemen yang sedang diklik dan dapatkan atribut elemen semasa itu sendiri mengikut keperluan

• Nilai sama ada elemen yang sedang diklik dan elemen yang hendak disembunyikan adalah sama
• Elemen yang sedang diklik dan elemen yang hendak disembunyikan Jika tidak sama, sembunyikan
• 4 Kesan akhir

Kemudian mari kita lihat halaman lain di luar elemen sasaran klik dalam vue Tetingkap pop timbul tersembunyi setempat

Kaedah:

Langkah 1: Tambah acara klik

ke elemen paling luar p pada halaman. Langkah 2: Tambahkan acara klik

pada elemen sasaran klik.

：@click=“popShow = false”Nota: popShow ialah bendera yang mengawal paparan dan menyembunyikan tetingkap timbul.

：@click=“popShow = true”

PS: Mari kita lihat pelaksanaan vue dan klik di tempat lain untuk menyembunyikan p

Kaedah 1:

Dengan mendengar acara

Kaedah 2 (lebih baik):

document.addEventListener('click',function(e){
    if(e.target.className!='usermessage'){
     that.userClick=false;
    }
})

Tambah acara klik pada p terluar

Tambahkan

@click="userClick=false"

pada elemen yang diklik Kaedah 3:

：@click.stop="userClick=!userClick"

Ringkasan: melalui acara vue.js. Pengubah suai berhenti boleh menghalang acara daripada terus menggelembung, atau anda boleh menggunakan kaedah event.stopPropagation() acara js asli.

<template>
<!--向页面添加关闭p的事件监听-->
<p class="page" @click="hide">

<!--添加.stop防止page的点击事件触发，导致无法显示p-->
<button @click.stop="show">点击显示p</button>

<!--指定的p。添加.stop防止点击p内的元素时，整个p被关闭-->
<p @click.stop>
...
</p>

</p>
<template>

<script>
export default {
methods:{
show(){},
hide(){}
}

}
</script>

Dengan menambah .stop pada p yang ditentukan, anda boleh menyedari bahawa hanya apabila anda mengklik pada elemen yang bukan dalam p, ia akan menggelembung ke halaman, dengan itu menyembunyikan p apabila anda klik di tempat lain.

Tambah .stop pada butang yang mencetuskan paparan p. Jika tidak, sebaik sahaja butang diklik, show() dicetuskan dan kemudian disebarkan ke halaman, hide() akan dicetuskan. serta-merta, dan p tidak boleh dipaparkan.

Disyorkan: "

Pilihan tutorial video 5 vue.js terkini

"

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan elemen semasa dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!