vue2封装导航栏包含多个单元每个单元中都放置了一张图片单元1中的图片默认是a 背景色默认是purple 当鼠标悬浮到单元1上时图片换为b 背景色为pink 当鼠标选中单元a的时候图片换为c 背景色为red 单元2中的图片默认是d 背景色是purple 当鼠标悬浮到单元2上时图片换为e背景色为pink 当鼠标选中单元2的时候图片换为f 背景色为red 并且在选中某个单元之后跳转到该单元对应的页面以此类推详细代码实现

时间: 2024-02-23 15:00:03 浏览: 64

好的，以下是一个简单的实现代码，供您参考： ``` <template> <div class="nav"> <div v-for="(item, index) in navItems" :key="index" :class="{'active': activeIndex === index}" @click="handleClick(index)" @mouseover="handleMouseOver(index)" @mouseleave="handleMouseLeave(index)" > <img :src="item.img" :class="{'img-b': item.hoverImg && hoverIndex === index, 'img-c': activeIndex === index}"> </div> </div> </template> <script> export default { data() { return { navItems: [ { img: 'a.png', hoverImg: 'b.png', activeImg: 'c.png', bgColor: 'purple', hoverBgColor: 'pink', activeBgColor: 'red' }, { img: 'd.png', hoverImg: 'e.png', activeImg: 'f.png', bgColor: 'purple', hoverBgColor: 'pink', activeBgColor: 'red' }, // 可以继续添加其他单元 ], activeIndex: -1, // 当前选中的单元索引 hoverIndex: -1 // 当前鼠标悬浮的单元索引 } }, methods: { handleClick(index) { this.activeIndex = index // TODO: 根据索引跳转到对应页面 }, handleMouseOver(index) { this.hoverIndex = index }, handleMouseLeave(index) { this.hoverIndex = -1 } } } </script> <style> .nav { display: flex; } .nav div { width: 100px; height: 100px; margin-right: 20px; display: flex; justify-content: center; align-items: center; background-color: purple; cursor: pointer; } .nav div.active { background-color: red; } .nav div:hover { background-color: pink; } .img-b { content: url('b.png'); } .img-c { content: url('c.png'); } </style> ``` 这里使用了 Vue.js 框架，并且将导航栏封装成了一个组件。在模板中，使用 `v-for` 循环渲染每个单元，根据当前状态绑定对应的样式和图片。在选中单元时，通过调用 `handleClick` 方法来改变选中状态，并且可以根据选中的索引跳转到对应的页面。在鼠标悬浮时和离开时，通过调用 `handleMouseOver` 和 `handleMouseLeave` 方法来改变鼠标悬浮状态。在样式中，使用 `content` 属性来改变图片的显示。

阅读全文

大家在看

softplot_eval9注册版

ffmpeg官方4.2源码编译出来的动态库

VNC4.2.9汉化注册版

delphi 11 SSL 库 ssleay32.dll 和 libeay32.dll

S120西门子调试手册

最新推荐

vue实现nav导航栏的方法

vue2 设置router-view默认路径的实例

nginx部署多个vue项目的方法示例

vue实现导航栏效果（选中状态刷新不消失）

vue自定义底部导航栏Tabbar的实现代码

实现Struts2+IBatis+Spring集成的快速教程

【数据融合技术】：甘肃土壤类型空间分析中的专业性应用

Waymo使用稀疏图卷积处理LiDAR点云，目标检测精度提升15%

Dwr实现无刷新分页功能的代码与数据库实例

【空间分布规律】：甘肃土壤类型与农业生产的关联性研究