Vue.js 3.x+Element Plus从入门到精通(视频教学版)
上QQ阅读APP看书,第一时间看更新

2.6 案例实战2——通过指令实现下拉菜单效果

网站主页中经常需要设计下拉菜单,当鼠标移动到某个菜单上时会弹出下拉子菜单列表,每个子菜单项可以链接到不同的页面,当鼠标离开菜单列表时,子菜单项会被隐藏掉。下面就通过指令来设计这样的下拉菜单效果。

【例2.22】 设计下拉菜单(源代码\ch02\2.22.html)。

在Chrome浏览器中运行程序,当鼠标放置在“经典图书”菜单项目时,结果如图2-30所示。

图2-30 下拉菜单效果