Maison > Article > interface Web > Comment masquer l'élément actuel dans vuejs
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é.
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
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"
.
: @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 :<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>
Ajoutez un événement de clic au p le plus externeMé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🎜"🎜🎜@click="userClick=false"
Ajoutez
à l'élément cliqué : @click.stop= " userClick=!userClick"
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!