简单介绍

本次系统分析与设计期末挣闲钱项目，我负责前端部分的实现。在项目前端的实现过程中使用iVew来使用不同的组件实现更好看的界面效果。

本篇博客主要介绍iVew的学习与使用，iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

相关文档中介绍到iVew特性：

• 高质量、功能丰富
• 友好的 API ，自由灵活地使用空间
• 细致、漂亮的 UI
• 事无巨细的文档
• 可自定义主题

安装与运行

使用的是windows10的开发环境，安装过程与vue.js类似：

• 使用“cnpm install iview --save”下载。

基本内容

• iVew的组件基础中的色彩、字体等内容不详细介绍，可参考网上其他博客。

• 主要介绍一下组件布局：

  • "<Divider>"组件用于添加分割线，可以通过更改type实现垂直分割线。

  • "<Menu>“为页面和功能提供导航的菜单列表，常用于网站顶部和左侧，通过添加”<SubMenu>“和”<MenuGroup>"来实现下拉选项，并通过onSelect来获取点击时的menuitem的name。除此之外，可以通过设置属性theme来设置menu的主题，分为：light、dark、primary。

  • "<Badge>"主要用于通知未读数的角标，提醒用户点击，配合icon使用实现简单的消息提醒功能，使用type可以设置不同的颜色。

  • "<Split>"可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域，通过设置mode可以切换水平分割或垂直分割，可嵌套使用。

  • "<Collapse>"可以将内容区域展开或折叠，可以用来实现很棒的物体细节展示效果。

• 以上就是我个人了解到的iVew组件，当然还有一些其它的组件也可以实现不错的效果比如Dropdown实现下拉菜单，但是这次没有学习和使用到，就不过多描述了。

效果图

使用Menu设置导航。