红月公益电竞活动中心

一、iView（View UI）

一、iView（View UI）

1、简介

官网：https://www.iviewui.com/ 仓库：https://github.com/view-design/ViewUI iView 与 View UI 本质上是一个东西，随着版本的升级，iView （4.0）改名为 View UI。是一套基于Vue.js 的开源 UI 组件库。

2、安装、使用

（1）使用 npm 安装（项目中如何使用，命令行运行）

npm install view-design --save

使用 vue-cli3.0 创建项目，可以参考：https://www.cnblogs.com/l-y-h/p/11241503.html。

【小案例：在项目的 main.js 中引入】

【main.js】

import Vue from 'vue'

import App from './App.vue'

// step1: 引入 ViewUI

import ViewUI from 'view-design'

// step2: 引入 css

import 'view-design/dist/styles/iview.css'

Vue.config.productionTip = false

// step3:声明使用 ViewUI

Vue.use(ViewUI)

new Vue({

render: h => h(App),

}).$mount('#app')

【修改App.vue】

（2）不使用 npm 安装（单 html 中使用，直接运行）

【使用

【使用 标签引入 css 文件】

【小案例：（index.html）】

二、组件 -- 基础

1、颜色（Color）

详见： https://www.iviewui.com/components/color

2、字体（Font）

详见：https://www.iviewui.com/components/font

3、按钮（Button）

详见：https://www.iviewui.com/components/button

【App.vue】

4、图标（Icon）

详见：https://www.iviewui.com/components/icon

【渲染前：】

【渲染后：】

三、组件 -- 布局

1、栅格系統（Grid）

详见：https://www.iviewui.com/components/grid

（1）使用栅格系统进行网页布局，可以使页面排版更加美观、舒适。

（2）采用 24 栅格系统。分为 row（行）和 col （列），其中 col 24 等分，可以使用 span 来控制。

【App.vue】

2、布局（Layout）

详见：https://www.iviewui.com/components/layout

常用组件：Header、Sider、Content、Footer、 Layout

（1）Layout：布局容器，内部可嵌套 Header、Sider、Content、Footer、 Layout。可放在任意父容器中。

（2）Header：顶部布局，自带默认样式，只能放在 Layout 中。

（3）Sider：侧边栏布局，自带默认样式，只能放在 Layout 中。

（4）Content：内容主体布局，自带默认样式，只能放在 Layout 中。

（5）Footer：底部布局，自带默认样式，只能放在 Layout 中。

【App.vue】

3、列表（List）

详见：https://www.iviewui.com/components/list

（1）基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

（2）小案例分析

【App.vue】

4、卡片（Card）

详见：https://www.iviewui.com/components/card

（1）基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。

（2）小案例分析：

【App.vue】

截图看的不明显，可以复制代码自行比较。

5、折叠面板（Collapse）

详见：https://www.iviewui.com/components/collapse

（1）可以显示、隐藏内容

（2）小案例分析

【App.vue】

6、面板切割、拖动效果（Split）

详见：https://www.iviewui.com/components/split

（1）可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。

（2）小案例分析：

【App.vue】

7、分割线（Divider）

详见：https://www.iviewui.com/components/divider

（1）区分内容的分割线。

（2）小案例分析：

【App.vue】

8、单元格（Cell）

详见：https://www.iviewui.com/components/cell

（1）常用于菜单列表

（2）小案例分析

【App.vue】

四、组件 -- 导航

1、导航菜单（Menu）

详见：https://www.iviewui.com/components/menu

（1）为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。

（2）小案例分析：

【App.vue】

2、标签页（Tabs）

详见：https://www.iviewui.com/components/tabs

（1）选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

（2）小案例分析：

【App.vue】

3、下拉菜单（Dropdown）

详见：https://www.iviewui.com/components/dropdown

（1）展示一组折叠的下拉菜单。用起来类似于 折叠面板（Collapse）

（2）小案例分析：

【App.vue】

4、分页（Page）

详见：https://www.iviewui.com/components/page

（1）当数据量较多时，使用分页可以快速进行数据切换。

（2）小案例分析：

【App.vue】

5、面包屑（Breadcrumb ）

详见：https://www.iviewui.com/components/breadcrumb

（1）显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。

（2）小案例分析：

【App.vue】

6、步骤条（Steps）

详见：https://www.iviewui.com/components/steps

（1）拆分某项流程的步骤，引导用户按流程完成任务。

（2）小案例分析

【App.vue】

五、表单

1、输入框（Input）

详见：https://www.iviewui.com/components/input

（1）基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。

（2）小案例分析

【App.vue】

2、开关（Switch）

详见：https://www.iviewui.com/components/switch（1）在两种状态间切换时用到的开关选择器。

（2）小案例分析：

【App.vue】

3、表格（Table）

详见：https://www.iviewui.com/components/table（1）主要用于展示大量结构化数据。支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。（2）小案例分析：

【App.vue】

（3）表格实用小案例（表格 + 分页）： 自定义模板、可以分页、分页后索引值可以跟着修改。

【App.vue】

六、视图

1、警告提示（Alert）

详见：https://www.iviewui.com/components/alert（1）静态地呈现一些警告信息，可手动关闭。

（2）小案例分析：

【App.vue】

2、全局提示（Message）

详见：https://www.iviewui.com/components/message（1）轻量级的信息反馈组件，在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

（2）小案例分析：

【App.vue】

3、通知提醒（Notice）

详见：https://www.iviewui.com/components/notice（1）在界面右上角显示可关闭的全局通知，常用于：系统主动推送、通知内容带有描述信息。

（2）小案例分析：

【App.vue】

4、抽屉（Drawer）

详见：https://www.iviewui.com/components/drawer（1）抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

（2）小案例分析：

【App.vue】

5、对话框（Modal）

详见：https://www.iviewui.com/components/modal（1）模态对话框，在浮层中显示，引导用户进行相关操作。

（2）小案例分析

【App.vue】

未完待续。。。