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】




VueUI -- iView4.0简单使用_第1张图片

 

 

 VueUI -- iView4.0简单使用_第2张图片

 

 

 

(2)不使用 npm 安装(单 html 中使用,直接运行)

【使用 

【使用  标签引入 css 文件】



【小案例:(index.html)】



    
    ViewUI example
    
    
    


Click me! Welcome to ViewUI

VueUI -- iView4.0简单使用_第3张图片

 

 

 VueUI -- iView4.0简单使用_第4张图片

 

 

 

二、组件 -- 基础

1、颜色(Color)

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

VueUI -- iView4.0简单使用_第5张图片

 

 

 

2、字体(Font)

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

VueUI -- iView4.0简单使用_第6张图片

 

 

3、按钮(Button)

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

VueUI -- iView4.0简单使用_第7张图片

 

 

 

【App.vue】




VueUI -- iView4.0简单使用_第8张图片

 

 

 

4、图标(Icon)

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

【渲染前:】


【渲染后:】

VueUI -- iView4.0简单使用_第9张图片

 

 

 

三、组件 -- 布局

1、栅格系統(Grid)

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

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

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

VueUI -- iView4.0简单使用_第10张图片

 

 

 

【App.vue】





VueUI -- iView4.0简单使用_第11张图片

 

 

 

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】



VueUI -- iView4.0简单使用_第12张图片

 

 

 

3、列表(List)

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

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

VueUI -- iView4.0简单使用_第13张图片

 

 

 VueUI -- iView4.0简单使用_第14张图片

 

 

 (2)小案例分析

【App.vue】


VueUI -- iView4.0简单使用_第15张图片

 

 

 

4、卡片(Card)

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

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

VueUI -- iView4.0简单使用_第16张图片

 

 

 

(2)小案例分析:

【App.vue】


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

VueUI -- iView4.0简单使用_第17张图片

 

 

 

5、折叠面板(Collapse)

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

(1)可以显示、隐藏内容

VueUI -- iView4.0简单使用_第18张图片

 

 

 (2)小案例分析

【App.vue】


VueUI -- iView4.0简单使用_第19张图片

 

 

 

6、面板切割、拖动效果(Split)

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

(1)可将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。

VueUI -- iView4.0简单使用_第20张图片

 

 

 

(2)小案例分析:

【App.vue】



VueUI -- iView4.0简单使用_第21张图片

 

 

7、分割线(Divider)

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

(1)区分内容的分割线。

VueUI -- iView4.0简单使用_第22张图片

 

 

 (2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第23张图片

 

 

 

8、单元格(Cell)

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

(1)常用于菜单列表

VueUI -- iView4.0简单使用_第24张图片

 

 

 (2)小案例分析

【App.vue】

VueUI -- iView4.0简单使用_第25张图片

 

 

 

四、组件 -- 导航

1、导航菜单(Menu)

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

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

VueUI -- iView4.0简单使用_第26张图片

 

 

 VueUI -- iView4.0简单使用_第27张图片

 

 

 

(2)小案例分析:

【App.vue】


 

VueUI -- iView4.0简单使用_第28张图片

 

 

 

2、标签页(Tabs)

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

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

VueUI -- iView4.0简单使用_第29张图片

 

 

 VueUI -- iView4.0简单使用_第30张图片

 

 

 

(2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第31张图片

 

 

3、下拉菜单(Dropdown)

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

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

VueUI -- iView4.0简单使用_第32张图片

 

 

 VueUI -- iView4.0简单使用_第33张图片

 

 

 (2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第34张图片

 

 

 

4、分页(Page)

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

(1)当数据量较多时,使用分页可以快速进行数据切换。

VueUI -- iView4.0简单使用_第35张图片

 

 

 VueUI -- iView4.0简单使用_第36张图片

 

 

 (2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第37张图片

 

 

 

5、面包屑(Breadcrumb )

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

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

VueUI -- iView4.0简单使用_第38张图片

 

 

(2)小案例分析:

【App.vue】



VueUI -- iView4.0简单使用_第39张图片

 

 

6、步骤条(Steps)

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

(1)拆分某项流程的步骤,引导用户按流程完成任务。

VueUI -- iView4.0简单使用_第40张图片

 

 

(2)小案例分析

【App.vue】



VueUI -- iView4.0简单使用_第41张图片

 

 

五、表单

1、输入框(Input)

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

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

VueUI -- iView4.0简单使用_第42张图片

 

 VueUI -- iView4.0简单使用_第43张图片

 

 

(2)小案例分析

【App.vue】



VueUI -- iView4.0简单使用_第44张图片

 

2、开关(Switch)

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

VueUI -- iView4.0简单使用_第45张图片

 

 (2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第46张图片

 

 

 

3、表格(Table)

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

【App.vue】


VueUI -- iView4.0简单使用_第47张图片

 

 

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

【App.vue】


 

VueUI -- iView4.0简单使用_第48张图片

 

 VueUI -- iView4.0简单使用_第49张图片

 

 

六、视图

1、警告提示(Alert)

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

VueUI -- iView4.0简单使用_第50张图片

 

 (2)小案例分析:

【App.vue】


 

VueUI -- iView4.0简单使用_第51张图片

 

 

2、全局提示(Message)

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

VueUI -- iView4.0简单使用_第52张图片

 

 

(2)小案例分析:

【App.vue】


 

VueUI -- iView4.0简单使用_第53张图片

 

 

 

 

3、通知提醒(Notice)

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

VueUI -- iView4.0简单使用_第54张图片

 

 


(2)小案例分析:

【App.vue】


 

VueUI -- iView4.0简单使用_第55张图片

 

 

 

 

4、抽屉(Drawer)

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

VueUI -- iView4.0简单使用_第56张图片

 

 (2)小案例分析:

【App.vue】


VueUI -- iView4.0简单使用_第57张图片

 

 

 

 

5、对话框(Modal)

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

VueUI -- iView4.0简单使用_第58张图片

 

 VueUI -- iView4.0简单使用_第59张图片

 

 VueUI -- iView4.0简单使用_第60张图片

 

 (2)小案例分析

【App.vue】


VueUI -- iView4.0简单使用_第61张图片

 

 

 

 

 

 

 未完待续。。。

 

你可能感兴趣的:(VueUI -- iView4.0简单使用)