Maison  >  Article  >  interface Web  >  Comment masquer l'élément actuel dans vuejs

Comment masquer l'élément actuel dans vuejs

藏色散人
藏色散人original
2021-09-24 16:36:473515parcourir

La méthode d'implémentation pour masquer l'élément actuel dans vuejs : 1. Une fois la page montée, écoutez l'événement de clic global ; 2. Obtenez l'élément actuellement cliqué et obtenez les attributs de l'élément actuel lui-même en fonction des besoins ; . Déterminez si l'élément actuellement cliqué doit être masqué. Si les éléments sont identiques ; 4. Si l'élément actuellement cliqué n'est pas le même que l'élément à masquer, il sera masqué.

Comment masquer l'élément actuel dans vuejs

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment masquer l'élément actuel dans vuejs ?

Vue implémente le clic en dehors de l'élément actuel pour masquer l'élément actuel (idée d'implémentation)

1 Éléments de liaison

2. Cycle de vie monté

3. Après le montage, écoutez l'événement de clic global

    Obtenez l'élément actuellement cliqué et obtenez les attributs de l'élément actuel lui-même en fonction des exigences
  • Déterminez si l'élément actuellement cliqué est le même que l'élément à masquer
  • Le L'élément actuellement cliqué n'est pas le même que l'élément à masquer. Ensuite, masquez
  • 4 L'effet final


Voyons ensuite comment vue implémente le fait de cliquer sur l'élément cible pour masquer la fenêtre contextuelle ailleurs sur. la page

Méthode :

Étape 1 : Donnez à l'élément le plus externe de la page pAjouter un événement de clic  : @click="popShow = false".

Étape 2 : Ajoutez un événement de clic à l'élément cible du clic  : @click="popShow = true".

:@click=“popShow = false”

步骤2:给点击目标元素加点击事件:@click=“popShow = true”

备注:popShow 为控制弹窗显示与隐藏的标志。

PS:下面看下vue实现点击其他地方隐藏p

方法一:  

  通过监听事件

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

方法二(比较好):

  给最外层的p加个点击事件 @click="userClick=false"

  给点击的元素上面加上:@click.stop="userClick=!userClick"Remarque : popShow est un drapeau qui contrôle l'affichage et le masquage des fenêtres pop-up.

PS : Jetons un coup d'œil à l'implémentation de vue consistant à cliquer ailleurs pour masquer p

Méthode 1 :


En écoutant les événements

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

Méthode 2 (mieux) :

Ajoutez un événement de clic au p le plus externe @click="userClick=false"

Ajoutez à l'élément cliqué : @click.stop= " userClick=!userClick"

Méthode 3 : 🎜🎜rrreee🎜Résumé : 🎜🎜Vous pouvez utiliser le modificateur .stop de l'événement vue.js pour empêcher l'événement de continuer à bouillonner, ou vous pouvez utiliser l'événement de la méthode .stopPropagation() de l'événement js natif. 🎜🎜🎜En ajoutant .stop au p spécifié, vous pouvez réaliser que ce n'est que lorsque vous cliquez sur un élément qui n'est pas dans le p, qu'il remontera jusqu'à la page, cachant ainsi le p lorsque vous cliquez ailleurs. 🎜🎜🎜Ajoutez .stop au bouton qui déclenche l'affichage de p Sinon, dès que le bouton est cliqué, show() est déclenché puis propagé à la page, hide() sera déclenché immédiatement, et p ne le sera pas. être affiché. 🎜🎜🎜Recommandé : "🎜La dernière sélection de 5 tutoriels vidéo vue.js🎜"🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn