文章 2022-06-14 来自:开发者社区

重读vue电商网站30之左侧菜单栏图标设计

我们想要的效果如下:如何设计?首先,我们可以在 data 中定义一个对象,对应于每一个菜单选项的 id然后通过 for 循环遍历每一个菜单选项的 id即可。

重读vue电商网站30之左侧菜单栏图标设计
文章 2022-06-14 来自:开发者社区

重读vue电商网站31之左侧菜单栏图标设计

保持一个子菜单的展开 直接在侧边栏区域添加上述属性即可

重读vue电商网站31之左侧菜单栏图标设计
文章 2022-06-14 来自:开发者社区

重读vue电商网站32之让菜单栏展开与折叠

通过点击一个按钮,让侧边栏进行展开与折叠。通过 isCollapse 的值来动态变化侧边栏的宽度。其中 cursor: pointer 设置是为了让鼠标放在折叠与展开处会有一个手指指向。letter-spacing: 0.2em 是为了让 ||| 有一定间隔

重读vue电商网站32之让菜单栏展开与折叠
文章 2022-06-14 来自:开发者社区

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态

为了让我们点击二级菜单时,会有一个激活效果,而且是保持状态,我们需要将利用 element-ui 菜单栏相关 default-active 属性,来让菜单保持激活。由于每个二级菜单都有一个路由链接,不妨将路由路径 path 存储在 sessionStorage 中,具体做法就是给二级菜单绑定一个事件:每次触发点击事件,我们需要更新当前路由路径,才能让点击的那个按钮高亮。然后在我们创建这个组件时,....

重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态
文章 2022-06-14 来自:开发者社区

重读vue电商网站29之左侧菜单栏

最终实现效果如下:

重读vue电商网站29之左侧菜单栏

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注