Vue JS 悬停问题答案

【问题标题】：Vue JS hover problemsVue JS 悬停问题
【发布时间】：2021-04-11 09:43:17
【问题描述】：

将鼠标悬停在其中一个图像上时，我有两个图像，如果将鼠标悬停在第一个图像上时显示更多详细信息，则会显示某个组件，显示具有红色背景的组件，以及将鼠标悬停在第二个图像上时图像，显示一个黄色背景的组件

所以我的问题是什么，实际上我的真实代码看起来非常不同显示

我的问题是，当我想与黄色或红色内容交互时，它们会消失，我想单击这些组件之一上的按钮，但它不起作用，因为它们消失了对于下拉组件，但在这种情况下，代码的架构被破坏了，因为鼠标悬停已经不正确

我知道我想解释的想法听起来令人困惑，但我希望你能理解我的问题，这里是代码框中my project 的链接

myothercomponent.vue

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "myOtherComponent",
};
</script>

myycomponent.vue

<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
      accusamus quod quis voluptatibus dolor magni, pariatur accusantium fugit
      itaque sint
    </p>
    <button>Button</button>
  </div>
</template>

<script>
export default {
  name: "MyFirstComponent",
};
</script>

HelloWorld.vue

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div v-bind:key="index" v-for="(girl, index) in girls">
        <img
          style="width: 200px; height: 200px; margin: 5px"
          @mouseover="mouseOver(girl)"
          @mouseout="mouseout(girl)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>

    <div v-for="(girl, index) in girls" v-bind:key="index">
      <slide-y-up-transition>
        <component
          v-show="girl.hovered"
          v-bind:is="girl.componentName"
        ></component>
      </slide-y-up-transition>
    </div>
  </div>
</template>

<script>
import { SlideYUpTransition } from "vue2-transitions";
import MyFirstComponent from "./colors/myycomponent";
import myOtherComponent from "./colors/myothercomponent";
export default {
  name: "HelloWorld",
  components: {
    MyFirstComponent,
    myOtherComponent,
    SlideYUpTransition,
  },
  data() {
    return {
      componentNames: ["MyFirstComponent", "myOtherComponent"],
      girls: [
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#337700",
          componentName: "MyFirstComponent",
        },
        {
          imgSrc: "https://html5css.ru/css/img_lights.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl) {
      girl.hovered = true;
    },

    mouseout: function (girl) {
      girl.hovered = false;
    },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

如果我对问题的理解正确，请尝试将 @mouseout 事件更改为 @mouseleave 事件，并检查它是否适用于您想要的行为：D

<template>
<div>
 <div style="display: flex; justify-content: center">
  <div v-bind:key="index" v-for="(girl, index) in girls">
    <img
      style="width: 200px; height: 200px; margin: 5px"
      @mouseover="mouseOver(girl)"
      v-bind:src="girl.imgSrc"
      alt="Snow"
    />
  </div>
</div>

<div v-for="(girl, index) in girls" v-bind:key="index" @mouseleave="mouseout(girl)">
  <slide-y-up-transition>
    <component
      v-show="girl.hovered"
      v-bind:is="girl.componentName"
    ></component>
  </slide-y-up-transition>
</div>

另外我认为如果你想悬停在下一张图片上，你应该隐藏其他彩色块，比如

mouseOver: function (girl) {
  this.girls.forEach((girl) => (girl.hovered = false));
  girl.hovered = true;
},

【讨论】：