说实话,写样式看似简单,其实有时候也会遇到很多坑。留下一笔,供参考(有点啰嗦,可以直接拖到最后看最后两行)。
这次是做一个PC端和移动端同时适用的项目,菜单的展示就成了一个问题。
于是我判断了用户设备(具体见本人的另一篇随笔:https://www.cnblogs.com/nuonuo-D/p/10516626.html),设了一个变量isMobi(移动端值为true,PC端值为false),菜单我用的是element-ui 的NavMenu,拟在pc端展示在页面左侧,移动端展示在页面顶部。也就是说,思路是这样:
isMobi?mode='horizontal':mode='vertical' (即移动端:NavMenu的模式为horizontal,pc端模式为vertical)
此外再调整相应的css
好了废话不多说,随着项目的迭代,菜单从原先的三个变成了六七个,移动端一屏已经无法显示。于是我就想着让它出滚动条。
本来以为单纯加个overflow-x:auto就能解决了,结果发现并不能。
经过几次尝试,得到的解决方法:
代码(快捷阅读:看红色文字即可):
<template> <div class="sidebar-top"> <el-menu :mode="mode" :co