VueUI -- iView4.0简单使用

一、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）】



    
    
    
    
    



    Click me!
    Welcome to ViewUI

 

 

 

 

 

 

二、组件 -- 基础

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】

 

 

 

 

 

 

 未完待续。。。