Vue.js 移动端 UI 组件库 YDUI

JavaScript024

Vue.js 移动端 UI 组件库 YDUI,第1张

Vue-ydui 是 YDUI Touch 的一个基于 Vue2.x 的移动端&微信UI实现版本,专为移动端打造,在追求完美视觉体验的同时也保证了其性能高效。

推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用:

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse,是一个 bollean 类型,用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮,

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据isCollapse的值进行判断,通过它的值为true或者是false,来给定不同的长度:

项目首页由顶部导航栏,左侧导航栏,中间内容区构成,如图

在app.vue引入element-ui,然后就可以在其他任何页面中使用了

将app.vue改为以下内容