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



    
    ViewUI example
    
    
    



    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】

【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】

未完待续。。。

vue

VueUI -- iView4.0简单使用

一、iView（View UI）

1、简介

2、安装、使用

二、组件 -- 基础

1、颜色（Color）

2、字体（Font）

3、按钮（Button）

4、图标（Icon）

三、组件 -- 布局

1、栅格系統（Grid）

基本使用、水平布局

区块间隔, 使用 :gutter 可以设置区块间隔，Flex 可以改变 栅格顺序(与 order 连用)

push="x" 向右移 x 格， pull="x" 向左移 x 格， offset="x" 向右偏移 x 格

justify:flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between

align:flex 布局下的垂直对齐方式，可选值为top、middle、bottom

2、布局（Layout）

3、列表（List）

一、使用 header 可以定义列表的头部， footer 可以定义列表的底部, size 可以定义列表的大小， border 定义列表的边界

二、ListItemMeta 中使用 avatar 可以定义图标， title 定义标题， description 定义内容

三、使用 item-layout="vertical" 可以使列表垂直

4、卡片（Card）

5、折叠面板（Collapse）

一、v-model 绑定的是 当前索引值，指向选择的某个面板，与 Panel 的 name 相对应

二、accordion 只允许展开一个面板,面板可以嵌套

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

一、左右分割

二、上下分割

三、组合分割

7、分割线（Divider）

一、type="vertical" 用于设置垂直分割线

二、默认水平分割，orientation 可以设置分割标题的位置，dashed 可以设置分割线是否为虚线

8、单元格（Cell）

title 只展示标题，label 展示内容， extra 在右侧展示内容， to用于跳转链接（默认图标）

四、组件 -- 导航

1、导航菜单（Menu）

一、通过 theme 属性可以设置菜单主题（primary只对水平菜单栏生效）， mode="horizontal" 为水平菜单(默认为垂直菜单)

二、使用 Submenu 可以定义二级菜单（可以嵌套），active-name 可以设置选中哪个 MenuItem， 使用 open-names 可以选择展开哪几个Submenu

三、使用 accordion 则每次只展开一个菜单， 使用 MenuGroup 可以进行菜单分组

2、标签页（Tabs）

一、使用label 可以定义标签内容，使用icon可以定义标签图标，使用 value 可以选中某个标签（与标签的name属性绑定，默认为选中第一个）

二、使用 disabled 可以禁用某个标签，使用 size 可以设置标签显示大小（只在 type="line"时生效）

三、type="card" 将标签显示为卡片样式， 通过 closable 、@on-tab-remove 可以进行删除标签的操作（注意若标签 存在 name 属性时，此时删除后，可能存在数据未清空的情况）

四、使用 slot="extra" 可以在标签右侧自定义内容, :animated 可以设置标签切换时是否有动画效果

3、下拉菜单（Dropdown）

一、下拉菜单基本使用，需 DropdownMenu、DropdownItem、 slot="list"结合。disabled 可以禁用某个菜单，divided 显示分割线

二、使用 trigger 可以自定义展开方式（hover(默认，鼠标悬浮展开菜单)，click 鼠标左键点击展开，contextMenu 鼠标右键展开，custom 自定义展开效果）

三、下拉菜单可以嵌套，使用 placement 可以设置菜单展开的方向

4、分页（Page）

一、total 定义数据的总数，(page-size默认为10，即页面上10条数据为1页)

二、show-sizer 可用于切换每页显示的数量, 可以使用 @on-page-size-change 去返回切换后的值

三、show-elevator 可用于跳转到某一页, 可以使用 @on-change 去返回切换后的页码

四、show-total 可用于显示总条数, size 用于设置分页的大小

五、prev-text、next-text可用于替代两边的图标

5、面包屑（Breadcrumb ）

一、默认以 '/' 分割

二、自定义分割线

6、步骤条（Steps）

一、根据current 自动判断各个步骤的状态(从 0 开始计数)

二、size 可以设置大小

三、icon 可以设置图标， status 可以设置执行某步骤的状态（wait、process、finish、error）

四、direction 可以设置为垂直的步骤条

五、表单

1、输入框（Input）

一、可以使用 v-model 实现双向绑定， placeholder 可以定义提示内容， size 可以设置输入框大小

二、使用 clearable 可以在输入框中显示清除按钮(输入框有值时). maxlength、show-word-limit 可以用于提示限制字符输入（会影响clearable）

三、使用密码框(type="password" password 可以隐藏、显示密码). 使用 icon 可以定义图标，点击图标可以触发 on-click 事件. 使用 search 可以设置搜索框样式, 可以结合 enter-button 使搜索图标变成 按钮的形式

四、可以通过 prefix 和 suffix 设置图标位置，直接使用 或者 使用slot同名引用

五、可以使用 slot 引用 prepend， append 来设置前后样式

2、开关（Switch）

3、表格（Table）

六、视图

1、警告提示（Alert）

一、使用 type 可以定义警告框的类型（默认为 info）。 使用 slot="desc" 可以添加自定义内容。 使用 show-icon 可以显示图标（使用 slot="icon" 可以自定义图标）。 使用 closable 可以关闭警告框(可使用 on-close 监控关闭事件)

2、全局提示（Message）

一、基本提示，默认在1.5秒后消失。可以提示不同的状态（不同颜色）。

二、可以设置背景色(background).

三、可以设置加载中样式，并定时取消（loading）。 可以设置关闭样式，主动关闭（closable）

3、通知提醒（Notice）

一、基本用法，默认在 4.5秒后关闭。如果 desc 参数为空或不填，则自动应用仅标题模式下的样式。

区块间隔, 使用 :gutter 可以设置区块间隔，Flex 可以改变栅格顺序(与 order 连用)

一、v-model 绑定的是当前索引值，指向选择的某个面板，与 Panel 的 name 相对应

二、使用 Submenu 可以定义二级菜单（可以嵌套），active-name 可以设置选中哪个 MenuItem，使用 open-names 可以选择展开哪几个Submenu

三、使用 accordion 则每次只展开一个菜单，使用 MenuGroup 可以进行菜单分组

三、type="card" 将标签显示为卡片样式，通过 closable 、@on-tab-remove 可以进行删除标签的操作（注意若标签存在 name 属性时，此时删除后，可能存在数据未清空的情况）

三、使用密码框(type="password" password 可以隐藏、显示密码). 使用 icon 可以定义图标，点击图标可以触发 on-click 事件. 使用 search 可以设置搜索框样式, 可以结合 enter-button 使搜索图标变成按钮的形式

四、可以通过 prefix 和 suffix 设置图标位置，直接使用或者使用slot同名引用

一、使用 type 可以定义警告框的类型（默认为 info）。
使用 slot="desc" 可以添加自定义内容。
使用 show-icon 可以显示图标（使用 slot="icon" 可以自定义图标）。
使用 closable 可以关闭警告框(可使用 on-close 监控关闭事件)

三、可以设置加载中样式，并定时取消（loading）。
可以设置关闭样式，主动关闭（closable）

二、使用 placement 可以设置抽屉出现的位置。当 closable = true 时，可以在右上角显示关闭按钮.
mask 为 false 时，不显示遮罩层.

二、添加 loading 样式（:loading="true"）。使用 closable = "false" 可以禁用右上角关闭按钮。
使用 :mask-closable="false" 可以禁用点击遮罩层关闭
使用 draggable 可以使对话框拖动，此时会主动关闭遮罩层