如何解决Vue JS - 在元素外部单击时如何隐藏元素
我有四张图片,当用户将鼠标悬停在图片上时,显示某个元素,当光标移到元素外时,该元素消失
在移动版中,mouseover
和mouseleave
不起作用,自然会被点击代替,但是问题是当用户点击元素外时,元素并没有消失,我尝试了不同的包,但它们不能更精确地工作,v-click-outside
事件不起作用
在codeandbox中打开我的项目后,通过单击“在新窗口中打开”按钮在新选项卡中打开页面,然后选择移动版本,然后在元素外再次单击后单击图片元素不会消失
<template>
<div>
<div class="enjoy_headline_container">
<div class="EnjoyGirlsContainer">
<div>
<h3 style="margin: 0">
Open the page in a new tab by clicking on the "Open in new window"
button then select the mobile version then click on the pictures
after a second click outside the element the element does not
disappear
</h3>
</div>
<div class="EnjoyGirlsList">
<div
v-for="(chunk,index) in Math.ceil(EnjoyGirlsList.length / 2)"
:key="'chunk-' + index"
:class="'wrap-' + index"
>
<div
v-for="(item,index) in EnjoyGirlsList.slice(
(chunk - 1) * 2,chunk * 2
)"
:key="'img-' + index"
class="EnjoyCard"
:class="'EnjoyCard-' + index"
>
<div>
<img
@mouseover="mouseOver(item,(hover = true))"
:src="item.imagePath"
alt="Snow"
/>
</div>
<div class="EnjoyCardContainer">
<div
:style="{ background: item.textColor }"
class="EnjoyCardChildContainer"
>
<h3 class="EnjoyCardChildContainerTitleName">
{{ item.titleName }}
</h3>
</div>
</div>
<div
v-if="selected === item"
class="below-all-description EnjoyGirlsHoverEffect"
>
<div class="next-to-description EnjoyGirlsHoverEffect">
<div
style="width: 100%; display: flex; justify-content: center"
v-for="(enjoy,index) in EnjoyGirlsList"
:key="index"
>
<div
@mouseleave="mouseout(enjoy,(hover = false))"
class="EnjoyGirlsChildHoverEffect"
>
<component
v-show="enjoy.hovered"
v-bind:is="enjoy.componentName"
></component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-all-description">
<template v-if="selected === null"></template>
<template v-else>
<div
style="width: 100%; display: flex; justify-content: center"
v-for="(enjoy,index) in EnjoyGirlsList"
:key="index"
>
<div
@mouseleave="mouseout(enjoy,(hover = false))"
class="EnjoyGirlsChildHoverEffect"
>
<component
v-show="enjoy.hovered"
v-bind:is="enjoy.componentName"
></component>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
import EnjoyBlue from "./components/EnjoyBlue";
import EnjoyGreen from "./components/EnjoyGreen";
import EnjoyYellow from "./components/EnjoyYellow";
import EnjoyRed from "./components/EnjoyRed";
export default {
name: "HomePage",components: {
EnjoyRed,EnjoyYellow,EnjoyGreen,EnjoyBlue,},data() {
return {
selected: null,hover: false,sectionGirlsListComponentsNames: [
"EnjoyRed","EnjoyYellow","EnjoyGreen","EnjoyBlue",],EnjoyGirlsList: [
{
imagePath: "https://i.ibb.co/mCpNXhG/IMG-6061-min.png",titleName: "TEENS",textColor: "#74C8C5",hovered: false,componentName: "EnjoyBlue",{
imagePath: "https://i.ibb.co/WvJjwsN/Rectangle-2.png",titleName: "MINXES",textColor: "#76ED00",componentName: "EnjoyGreen",{
imagePath: "https://i.ibb.co/7khc5f0/Rectangle-3.png",titleName: "MILFS",textColor: "#FFE600",componentName: "EnjoyYellow",{
imagePath: "https://i.ibb.co/6nz97Bw/Rectangle-4.png",titleName: "COURGARS",textColor: "#CC003D",componentName: "EnjoyRed",};
},methods: {
mouseOver: function (enjoy) {
this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
this.selected = enjoy;
enjoy.hovered = true;
if (this.hover) {
console.log("4949494");
}
},mouseout: function (enjoy) {
this.selected = null;
enjoy.hovered = false;
},mouseEnter: function () {},Prev() {
this.$refs.carousel.prev();
},showNext() {
this.$refs.carousel.next();
},};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。