javascript - Vue JS - 如何更改鼠标悬停时显示的组件的位置
问题描述
我有一个与组件位置有关的问题。我有四张图片,当你将鼠标悬停在它们上面时,会显示某个组件,它看起来像这样
例如,如果将鼠标光标悬停在黄色图片上,则会在下方显示另一个组件,以此类推,所有组件
我的问题是当屏幕达到568像素时,也就是手机版,因为我需要改变显示组件的位置,因为此刻在手机版我应该显示的组件看起来像这样
请注意,所有组件都显示在底部,我需要将它们显示在每个图像的底部
也就是说,我希望它们看起来像这样。
应用程序.vue
<template>
<div>
<div class="enjoy_headline_container">
<div class="EnjoyGirlsContainer">
<div>
<h3>Shrink the screen to 568 pixels or lower to see the problem</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))"
v-bind: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>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<div
class="HoverLogic"
@mouseleave="mouseout(enjoy, (hover = false))"
v-for="(enjoy, index) in EnjoyGirlsList"
:key="index"
>
<div class="EnjoyGirlsChildHoverEffect">
<component
v-show="enjoy.hovered"
v-bind:is="enjoy.componentName"
></component>
</div>
</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 {
homePageImageList: [
{
imageURL:
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL:
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
{
imageURL:
"http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
},
],
hover: false,
sectionGirlsListComponentsNames: [
"EnjoyRed",
"EnjoyYellow",
"EnjoyGreen",
"EnjoyBlue",
],
EnjoyGirlsList: [
{
imagePath:
"https://lh3.googleusercontent.com/_0OiZeWgElIETUMZW8B9wEZR-V0BLMyDBHfK6hdYQVGzsryLQAZ0GEL9_PDi5NlzmpK8bETuJcZ0CtUQKnErvs36Xw=w640-h400-e365-rj-sc0x00ffffff",
titleName: "TEENS",
textColor: "#74C8C5",
hovered: false,
componentName: "EnjoyBlue",
},
{
imagePath:
"https://p0.piqsels.com/preview/32/831/578/leaf-malina-garden-nature-thumbnail.jpg",
titleName: "MINXES",
textColor: "#76ED00",
hovered: false,
componentName: "EnjoyGreen",
},
{
imagePath:
"https://dandelionmarketing.com/wp-content/uploads/2020/01/yellow-09.jpg",
titleName: "MILFS",
textColor: "#FFE600",
hovered: false,
componentName: "EnjoyYellow",
},
{
imagePath:
"http://pm1.narvii.com/6691/30c6c5246b1aee0e676f741f63ab144bbdb77da2_00.jpg",
titleName: "COURGARS",
textColor: "#CC003D",
hovered: false,
componentName: "EnjoyRed",
},
],
};
},
methods: {
mouseOver: function (enjoy) {
this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
enjoy.hovered = true;
},
mouseout: function (enjoy) {
enjoy.hovered = false;
},
},
};
</script>
享蓝
<template>
<p>Blue Component</p>
</template>
享受绿色
<template>
<p>Green Component</p>
</template>
享受黄色
<template>
<p>Yellow Component</p>
</template>
享受红色
<template>
<p>Red Component</p>
</template>
解决方案
有一百万种方法可以做到这一点。实现您想要的一种简单方法是将信息同时包含在“两个”位置,并使用 CSS 媒体查询控制其外观。见这里:https ://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
所以基本上它看起来像这样
<Cougars>
<EnjoyRed class="next-to-description" />
</Cougars>
<MINXES>
<EnjoyGreen class="next-to-description" />
</MINXES>
<MILFS>
<EnjoyYellow class="next-to-description" />
</MILFS>
<component :is="enjoy.componentName" class="below-all-description" />
然后设置一些CSS,如:
.next-to-description {
display: block;
}
.below-all-description {
display: none;
}
@media screen and (min-width: 568px) {
.next-to-description {
display: none;
}
.below-all-description {
display: block;
}
}
现在,您只需要确保无论何时<Cougars>
获取mouseover
事件,您都可以使用 v-if 或其他内容填充EnjoyRed
组件,并继续使用<component :is="..">
CSS 将控制并确保一次只显示 1 个。
我在 jsfiddle 上添加了我的想法的准系统示例:
推荐阅读
- sed - 使用 sed 消除特定字符串
- c# - File.Move() 是否会删除 IoException 上的原始文件?
- airflow - 气流 - 任务之间的变量
- html - 带有溢出隐藏的异常形状的文本区域不起作用
- microsoft-teams - 传入的 webhook 请求大小限制
- c# - UseCookieAuthentication.LoginPath 不在 AD B2C 回调中返回身份/声明
- python - Kivy:AttributeError:“NoneType”对象没有属性“add_widget”
- arrays - vb 中的刽子手试图用“*”显示正确的字母和错误的字母
- c# - 从抛出的异常中恢复或返回
- kubernetes - Helm 按特定顺序安装