安装iview

npm install view-design --save

导入iview

在main.js中导入iview

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

按需引用iview组件

a.安装babel

npm install babel-plugin-import --save-dev

b.在 .babelrc 文件中

{"plugins": [["import", {"libraryName": "view-design","libraryDirectory": "src/components"}]]
}

c.导入案例

import { Button, Table } from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);

组件规范

props 传递数据
slot 内容分发
events $emit @click 事件

使用:prop传递数据格式为 数字、布尔值或函数时，必须带:

Correct usage:
<Page :current="1" :total="100"></Page>Incorrect usage:
<Page current="1" total="100"></Page>

全局配置

组件会优先使用 prop 设置的属性，如果未设置，再使用全局配置

Vue.use(ViewUI, {transfer: true,size: 'large',capture: false,select: {arrow: 'md-arrow-dropdown',arrowSize: 20}
});

解释：全局配置组件默认属性

  • transfer：所有带浮层的组件，是否将浮层放置在 body 内，默认为不设置，详见各组件默认的 transfer 值。可选值为 true 或 false。

  • size：所有带有 size 属性的组件的尺寸，默认为不设置，详见各组件默认的 size 值。可选值为 default、small 或 large。

  • 4.0.0 capture：所有带下拉的组件是否开启 capture 模式，默认为 true。可选值为true或 false。

    capture 是浏览器的一种默认行为，如果开启，当可下拉的组件（例如 Select）处于展开状态时，点击外部操作不会立即响应，而是先收起下拉菜单，再次点击才会响应操作。

    如果不需要该特性，可以通过全局配置，将 capture 设置为 false。

  • select.arrow：Select 下拉箭头图标

  • select.customArrow：Select 自定义下拉箭头图标

  • select.arrowSize：Select 下拉箭头尺寸

  • cell.arrow：Cell 右侧箭头图标

  • cell.customArrow：Cell 自定义右侧箭头图标

  • cell.arrowSize：Cell 右侧箭头尺寸

  • menu.arrow：Menu 下拉箭头图标

  • menu.customArrow：Menu 自定义下拉箭头图标

  • menu.arrowSize：Menu 下拉箭头尺寸

  • tree.arrow：Tree 下拉箭头图标

  • tree.customArrow：Tree 自定义下拉箭头图标

  • tree.arrowSize：Tree 下拉箭头尺寸

  • cascader.arrow：Cascader 下拉箭头图标

  • cascader.customArrow：Cascader 自定义下拉箭头图标

  • cascader.arrowSize：Cascader 下拉箭头尺寸

  • cascader.itemArrow：Cascader 右侧箭头图标

  • cascader.customItemArrow：Cascader 自定义右侧箭头图标

  • cascader.itemArrowSize：Cascader 右侧箭头尺寸

  • colorPicker.arrow：ColorPicker 下拉箭头图标

  • colorPicker.customArrow：ColorPicker 自定义下拉箭头图标

  • colorPicker.arrowSize：ColorPicker 下拉箭头尺寸

  • datePicker.icon：DatePicker 日期图标

  • datePicker.customIcon：DatePicker 自定义日期图标

  • datePicker.iconSize：DatePicker 日期图标尺寸

  • timePicker.icon：TimePicker 时间图标

  • timePicker.customIcon：TimePicker 自定义时间图标

  • timePicker.iconSize：TimePicker 时间图标尺寸

  • tabs.closeIcon：Tabs 关闭图标

  • tabs.customCloseIcon：Tabs 自定义关闭图标

  • tabs.closeIconSize：Tabs 关闭图标尺寸

  • modal.maskClosable：Modal 的 maskClosable 属性

国际化

View UI（iView） 的所有组件文案默认使用的是中文，通过设置可以使用其它语言。

按需引入

import { locale, Page } from 'view-design';
import lang from 'view-design/dist/locale/en-US';
locale(lang);
Vue.component('Page', Page);

主题

View UI（iVIew）默认提供了一套 UI 主题，并且可以在一定程度上定制新主题

View UI（iVIew）的样式是基于 Less 进行开发的，默认以前缀 .ivu- 作为命名空间，并且定义了一套样式变量，定制主题，就是编辑这个变量列表。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgh1xaiD-1616675667399)(C:\Users\123456\AppData\Roaming\Typora\typora-user-images\image-20210316095155712.png)]

定制主题：变量覆盖

a.在src下新建my-theme文件夹

b.在my-theme文件夹下新建index.less

C.在index.less中定义自己的主题

@import '~view-design/src/styles/index.less';
@primary-color: #8c0776;
....

d.在main.js中导入index.less

import '../my-theme/index.less';

DarkTheme深色主题样例

https://pro.iviewui.com/store/item/1247091768848158720?ref=iview

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpSUZ5hE-1616675667409)(C:\Users\123456\AppData\Roaming\Typora\typora-user-images\image-20210316095918343.png)]

View UI Loader

用于统一 View UI（iView） 标签书写规范，所有标签都可以使用首字母大写的形式

安装

npm install iview-loader --save-dev

配置

在vue项目根目录下的vue.config.js中的module中配置如下：

rules: [{test: /\.vue$/,use: [{loader: 'vue-loader',options: {}},{loader: 'iview-loader',options: {prefix: false}}]}]

  • 参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 <i-row>、<i-select>

    {'i-affix': 'Affix','i-alert': 'Alert','i-anchor': 'Anchor','i-anchor-link': 'AnchorLink','i-auto-complete': 'AutoComplete','i-avatar': 'Avatar','i-back-top': 'BackTop','i-badge': 'Badge','i-breadcrumb': 'Breadcrumb','i-breadcrumb-item': 'BreadcrumbItem','i-button': 'Button','i-button-group': 'ButtonGroup','i-card': 'Card','i-carousel': 'Carousel','i-carousel-item': 'CarouselItem','i-cascader': 'Cascader','i-cell': 'Cell','i-cell-group': 'CellGroup','i-checkbox': 'Checkbox','i-checkbox-group': 'CheckboxGroup','i-circle': 'i-circle','i-col': 'Col','i-collapse': 'Collapse','i-color-picker': 'ColorPicker','i-content': 'Content','i-divider': 'Divider','i-date-picker': 'DatePicker','i-drawer': 'Drawer','i-dropdown': 'Dropdown','i-dropdown-item': 'DropdownItem','i-dropdown-menu': 'DropdownMenu','i-footer': 'Footer','i-form': 'Form','i-form-item': 'FormItem','i-header': 'Header','i-icon': 'Icon','i-input': 'Input','i-input-number': 'InputNumber','i-layout': 'Layout','i-list': 'List','i-list-item': 'ListItem','i-list-item-meta': 'ListItemMeta','i-menu': 'Menu','i-menu-group': 'MenuGroup','i-menu-item': 'MenuItem','i-sider': 'Sider','i-submenu': 'Submenu','i-modal': 'Modal','i-option': 'Option','i-option-group': 'OptionGroup','i-page': 'Page','i-panel': 'Panel','i-poptip': 'Poptip','i-progress': 'Progress','i-radio': 'Radio','i-radio-group': 'RadioGroup','i-rate': 'Rate','i-row': 'Row','i-select': 'Select','i-slider': 'Slider','i-spin': 'Spin','i-split': 'Split','i-step': 'Step','i-steps': 'Steps','i-switch': 'i-switch','i-table': 'Table','i-tabs': 'Tabs','i-tab-pane': 'TabPane','i-tag': 'Tag','i-time': 'Time','i-timeline': 'Timeline','i-timeline-item': 'TimelineItem','i-time-picker': 'TimePicker','i-tooltip': 'Tooltip','i-transfer': 'Transfer','i-tree': 'Tree','i-upload': 'Upload'
}

    组件

    基础

    color色彩

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x60yYdNu-1616675667415)(C:\Users\123456\AppData\Roaming\Typora\typora-user-images\image-20210316102832952.png)]

    font字体

    字体预览

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sm4eZzDF-1616675667425)(C:\Users\123456\AppData\Roaming\Typora\typora-user-images\image-20210316103009277.png)]

    字体代码
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    字体使用规范
中文字体 示例 粗细 颜色 字号
主标题 我是标题 加粗 #464c5b 16px
次级标题 我是标题 加粗 #464c5b 14px
小标题 我是标题 加粗 #464c5b 12px
正文 我是正文 默认 #657180 12px
辅助文字 我是辅助文字 默认 #9ea7b4 12px
失效文字 我是失效文字 默认 #c3cbd6 12px
链接文字 我是链接文字 默认 #3399ff 12px
英文字体 示例 粗细 颜色 字号
Main Head This is an example bold #464c5b 16px
Sub Head This is an example bold #464c5b 14px
Small Head This is an example bold #464c5b 12px
Text This is an example normal #657180 12px
Help This is an example normal #9ea7b4 12px
Disabled This is an example normal #c3cbd6 12px
Link This is an example normal #3399ff 12px

基础

色彩

字体

按钮

按钮类型

按钮类型有：默认按钮、主按钮、虚线按钮、文字按钮以及四种颜色按钮。

通过设置type为primary、dashed、text、info、success、warning、error创建不同样式的按钮，不设置为默认样式。

幽灵按钮

幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。

图案按钮及按钮形状

通过设置icon属性在Button内嵌入一个Icon，或者直接在Button内使用Icon组件。

使用Button的icon属性，图标位置将在最左边，如果需要自定义位置，需使用Icon组件。

通过设置shape属性为circle，可将按钮置为圆的形状。

按钮尺寸

按钮有三种尺寸：大、默认（中）、小

通过设置size为large和small将按钮设置为大和小尺寸，不设置为默认（中）尺寸。

长按钮

通过设置属性 long 可将按钮宽度设置为 100%，常用于弹窗内操作按钮。

使用者也可以直接通过给组件添加 style 来设置更细节的样式，比如定宽。

不可用状态

通过添加disabled属性可将按钮设置为不可用状态。

加载中状态

通过添加loading属性可以让按钮处于加载中状态，后两个按钮在点击时进入加载状态。

按钮组合

将多个Button放入ButtonGroup内，可实现按钮组合的效果。

通过设置ButtonGroup的属性size为large和small，可将按钮组尺寸设置为大和小，不设置size，则为默认（中）尺寸。

通过设置ButtonGroup的属性shape为circle，可将按钮组形状设置为圆角。

按钮纵向排列

通过设置ButtonGroup的属性vertical，可以使按钮组纵向排列。

跳转

通过设置 to 可以实现点击按钮直接跳转，支持传入 vue-router 对象。

设置 replace 则不会保存历史记录。

设置 target，会跟 a 标签一样的行为。

Button props
属性 说明 类型 默认值
type 按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置 String default
ghost 幽灵属性，使按钮背景透明 Boolean false
size 按钮大小，可选值为large、small、default或者不设置 String default
shape 按钮形状，可选值为circle或者不设置 String -
long 开启后，按钮的长度为 100% Boolean false
html-type 设置button原生的type，可选值为button、submit、reset String button
disabled 设置按钮为禁用状态 Boolean false
loading 设置按钮为加载中状态 Boolean false
icon 设置按钮的图标类型 String -
custom-icon 设置按钮的自定义图标 String -
to 跳转的链接，支持 vue-router 对象 String | Object -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false
ButtonGroup props
属性 说明 类型 默认值
size 按钮组合大小，可选值为large、small、default或者不设置 String default
shape 按钮组合形状，可选值为circle或者不设置 String -
vertical 是否纵向排列按钮组 Boolean false

Icon

代码中使用
<Icon type="ios-checkmark" />
渲染后：
<i class="ivu-icon ivu-icon-ios-checkmark"></i>
Icon props
属性 说明 类型 默认值
type 图标的名称 String -
size 图标的大小，单位是 px Number | String -
color 图标的颜色 String -
custom 自定义图标 String -
自定义图标用法

View UI（iView） 的 Icon 支持使用第三方自定义图标，你可以引入任意的字体文件库来使用。

所有图标：http://v1.iviewui.com/components/icon#SYTB

布局

栅格

采用了24栅格系统，将区域进行24等分

  • 使用row在水平方向创建一行
  • 将一组col插入在row中
  • 在每个col中，键入自己的内容
  • 通过设置col的span参数，指定跨越的范围，其范围是1到24
  • 每个row中的col总和应该为24
基础用法
<template><Row><Col span="12">col-12</Col><Col span="12">col-12</Col></Row><br><Row><Col span="8">col-8</Col><Col span="8">col-8</Col><Col span="8">col-8</Col></Row><br><Row><Col span="6">col-6</Col><Col span="6">col-6</Col><Col span="6">col-6</Col><Col span="6">col-6</Col></Row>
</template>
Row props
属性 说明 类型 默认值
gutter 栅格间距，单位 px，左右平分 Number 0
type 布局模式，可选值为flex或不选，在现代浏览器下有效。4.5.0 版本起强制使用 flex 布局 String -
align flex 布局下的垂直对齐方式，可选值为top、middle、bottom String -
justify flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between String -
class-name 自定义的class名称 String -
wrap 4.5.0 是否自动换行 Boolean true
Col props
属性 说明 类型 默认值
span 栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none Number | String -
flex 4.5.0 flex 布局属性 Number | String -
order 栅格的顺序，在flex布局模式下有效 Number | String -
offset 栅格左侧的间隔格数，间隔内不可以有栅格 Number | String -
push 栅格向右移动格数 Number | String -
pull 栅格向左移动格数 Number | String -
class-name 自定义的class名称 String -
xs <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -
sm ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -
md ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -
lg ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -
xl ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -
xxl ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 Number | Object -

Layout

Sider props
属性 说明 类型 默认值
breakpoint 触发响应式布局的断点，可选值为xs,sm,md,lg,xl或xxl，若不设此属性则不会触发响应式布局。 String -
value 侧边栏是否收起，可使用 v-model 双向绑定数据。 Boolean false
width 宽度 Number 200
collapsible 是否可收起，设为false后，默认触发器会隐藏，且响应式布局不会触发 Boolean false
collapsed-width 收缩宽度，设置为 0 会出现特殊 trigger Number 64
hide-trigger 隐藏默认触发器 Boolean false
default-collapsed 是否默认收起，设置了collapsible后设置此属性侧边栏仍会收起。 Boolean false
reverse-arrow 改变侧边栏触发器箭头方向，和改变侧边栏收起方向，当Sider在右边时可以使用。 Boolean false
Sider events
事件名 说明 返回值
on-collapse 展开-收起时的回调 true / false
Sider slot
名称 说明
trigger 自定义触发器
Sider methods
方法名 说明
toggleCollapse 改变Sider展开-收起状态。

List

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

List props
属性 说明 类型 默认值
border 是否显示边框 Boolean false
item-layout 设置 ListItem 布局, 可选值为 horizontal（横排）或 vertical（竖直） String horizontal
header 列表头部 String -
footer 列表底部 String -
loading 列表是否正在加载 Boolean false
size 列表尺寸，可选值为 small、large、default String default
split 是否展示分割线 Boolean true
List slot
名称 说明
header 自定义列表头部
footer 自定义列表底部
loading 自定义加载中
ListItem slot
名称 说明
action 列表操作组，根据 item-layout 的不同, 位置在卡片底部或者最右侧
extra 额外内容, 通常用在 item-layout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧

ListItemMeta props

属性 说明 类型 默认值
avatar 列表元素的图标 String -
title 列表元素的标题 String -
description 列表元素的描述内容 String -

ListItemMeta slot

名称 说明
avatar 自定义列表元素的图标
title 自定义列表元素的标题
description 自定义列表元素的描述内容

  • Card

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

    Card props
    属性 说明 类型 默认值
    bordered 是否显示边框，建议在灰色背景下使用 Boolean true
    dis-hover 禁用鼠标悬停显示阴影 Boolean false
    shadow 卡片阴影，建议在灰色背景下使用 Boolean false
    padding 卡片内部间距，单位 px Number 16
    title 标题，2.12.0 新增 String -
    icon 标题前的图标，2.12.0 新增 String -
    to 4.0.0 跳转的链接，支持 vue-router 对象 String | Object -
    replace 4.0.0 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
    target 4.0.0 相当于 a 链接的 target 属性 String _self
    append 4.0.0 同 vue-router append Boolean false
    Card slot
    名称 说明
    title 自定义卡片标题，如果是简单文字，可以使用<p>标签包裹
    extra 额外显示的内容，默认位置在右上角
    无 卡片主体内容

Collapse

将内容区域折叠/展开。

Collapse props
属性 说明 类型 默认值
value 当前激活的面板的 name，可以使用 v-model 双向绑定 Array | String -
accordion 是否开启手风琴模式，开启后每次至多展开一个面板 Boolean false
simple 是否开启简洁模式 Boolean false
Collapse events
事件名 说明 返回值
on-change 切换面板时触发，返回当前已展开的面板的 key，格式为数组 []
Panel props
属性 说明 类型 默认值
name 当前面板的 name，与 Collapse的value对应，不填为索引值 String index
hide-arrow 隐藏箭头 Boolean false
Panel slot
名称 说明
无 面板头内容
content 描述内容

Split

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

Split props
属性 说明 类型 默认值
value 面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定 Number | String 0.5
mode 类型，可选值为 horizontal 或 vertical String horizontal
min 最小阈值 Number | String 40px
max 最大阈值 Number | String 40px
Split events
事件名 说明 返回值
on-move-start 拖拽开始 -
on-moving 拖拽中 event
on-move-end 拖拽结束 -
Split slot
名称 说明
left mode 为 horizontal 时可用，左边面板
right mode 为 horizontal 时可用，右边面板
top mode 为 vertical 时可用，上边面板
bottom mode 为 vertical 时可用，下边面板
trigger 自定义分割拖拽节点

  • Divider

    Divider props
    属性 说明 类型 默认值
    type 水平还是垂直类型，可选值为 horizontal 或 vertical String horizontal
    orientation 分割线标题的位置，可选值为 left、right 或 center Number center
    dashed 是否虚线 Boolean false
    plain 4.5.0 文字是否显示为普通正文样式 Boolean false
    size 3.3.0 尺寸，可选值为 small 或 default String default

Cell

CellGroup events
事件名 说明 返回值
on-click 点击单元格时触发 name
Cell props
属性 说明 类型 默认值
name 用来标识这一项 String | Number -
title 左侧标题 String -
label 标题下方的描述信息 String -
extra 右侧额外内容 String -
disabled 禁用该项 Boolean false
selected 标记该项为选中状态 Boolean false
to 跳转的链接，支持 vue-router 对象 String | Object -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false
Cell slot
名称 说明
默认 相当于 title
icon 标题前的 Icon
label 相当于 label
extra 相当于 extra
arrow 有链接时，可自定义右侧箭头

导航

Menu

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

Menu props
属性 说明 类型 默认值
mode 菜单类型，可选值为 horizontal（水平） 和 vertical（垂直） String vertical
theme 主题，可选值为 light、dark、primary，其中 primary 只适用于 mode="horizontal" String light
active-name 激活菜单的 name 值 String | Number -
open-names 展开的 Submenu 的 name 集合 Array []
accordion 是否开启手风琴模式，开启后每次至多展开一个子菜单 Boolean false
width 导航菜单的宽度，只在 mode="vertical" 时有效，如果使用 Col 等布局，建议设置为 auto String 240px
Menu events
事件名 说明 返回值
on-select 选择菜单（MenuItem）时触发 name
on-open-change 当 展开/收起 子菜单时触发 当前展开的 Submenu 的 name 值数组
Menu methods
方法名 说明 参数
updateOpened 手动更新展开的子目录，注意要在 $nextTick 里调用 无
updateActiveName 手动更新当前选择项，注意要在 $nextTick 里调用 无
MenuItem props
属性 说明 类型 默认值
name 菜单项的唯一标识，必填 String | Number -
to 跳转的链接，支持 vue-router 对象 String | Object -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false
Submenu props
属性 说明 类型 默认值
name 子菜单的唯一标识，必填 String | Number -
Submenu slot
名称 说明
无 菜单项
title 子菜单标题
MenuGroup props
属性 说明 类型 默认值
title 分组标题 String 空

  • Tabs

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

    Tabs props
    属性 说明 类型 默认值
    value 当前激活 tab 面板的 name，可以使用 v-model 双向绑定数据 String 默认为第一项的 name
    type 页签的基本样式，可选值为 line 和 card String line
    size 尺寸，可选值为 default 和 small，仅在 type="line" 时有效 String default
    closable 是否可以关闭页签，仅在 type="card" 时有效 Boolean false
    animated 是否使用 CSS3 动画 Boolean true
    capture-focus Tabs 内的表单类组件是否自动获得焦点 Boolean false
    before-remove 关闭前的函数，返回 Promise 可阻止标签关闭 Function -
    name 3.3.1 当嵌套使用 Tabs，指定 name 区分层级 String -
    draggable 4.3.0 开启可配合事件 @on-drag-drop 实现拖拽调整页签顺序，详见示例 Boolean false
    Tabs events
    事件名 说明 返回值
    on-click tab 被点击时触发 name
    on-tab-remove tab 被关闭时触发 name
    on-contextmenu 4.3.0 当前页签点击右键时触发 data, event, position
    on-drag-drop 4.3.0 拖拽调整页签顺序时触发 name1, name2, index1, index2, names
    Tabs slot
    名称 说明
    extra 附加内容
    contextMenu 4.3.0 右键菜单，详见示例
    TabPane props
    属性 说明 类型 默认值
    name 用于标识当前面板，对应 value，默认为其索引值 String -
    label 选项卡头显示文字，支持 Render 函数。 学习 Render 函数的内容 String | Function 空
    icon 选项卡图标 String -
    disabled 是否禁用该选项卡 Boolean false
    closable 是否可以关闭页签，仅在 type="card" 时有效 Boolean null
    tab 3.3.1 当嵌套使用 Tabs，设置该属性指向对应 Tabs 的 name 字段 String -
    index 3.3.1 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序(需大于 0) Number -
    context-menu 4.3.0 是否支持右键菜单 Boolean false

Dropdown

展示一组折叠的下拉菜单.

Dropdown props
属性 说明 类型 默认值
trigger 触发方式，可选值为 hover（悬停）click（点击）contextMenu（右键）custom（自定义），使用 custom 时，需配合 visible 一起使用 String hover
visible 手动控制下拉框的显示，在 trigger = ‘custom’ 时使用 Boolean false
placement 下拉菜单出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end, 2.12.0 版本开始支持自动识别 String bottom
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
transfer-class-name 3.3.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
stop-propagation 3.4.0 是否开启 stop-propagation Boolean false
Dropdown events
事件名 说明 返回值
on-click 点击菜单项时触发 DropdownItem 的 name 值
on-visible-change 菜单显示状态改变时调用 visible
on-clickoutside 点击外部关闭下拉菜单时触发 event
Dropdown slot
名称 说明
无 主体内容
list 列表内容，一般由 DropdownMenu 承担
DropdownItem props
属性 说明 类型 默认值
name 用来标识这一项 String -
disabled 禁用该项 Boolean false
divided 显示分割线 Boolean false
selected 标记该项为选中状态 Boolean false

  • Page

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

    Page props
    属性 说明 类型 默认值
    current 当前页码，支持 .sync 修饰符 Number 1
    total 数据总数 Number 0
    page-size 每页条数 Number 10
    page-size-opts 每页条数切换的配置 Array [10, 20, 30, 40]
    placement 条数切换弹窗的展开方向，可选值为 bottom 和 top String bottom
    size 可选值为small（迷你版）或不填（默认） String -
    simple 简洁版 Boolean false
    show-total 显示总数 Boolean false
    show-elevator 显示电梯，可以快速切换到某一页 Boolean false
    show-sizer 显示分页，用来改变page-size Boolean false
    class-name 自定义 class 名称 String -
    styles 自定义 style 样式 Object -
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    prev-text 替代图标显示的上一页文字 String -
    next-text 替代图标显示的下一页文字 String -
    disabled 4.0.0 是否禁用 Boolean false
    Page events
    事件名 说明 返回值
    on-change 页码改变的回调，返回改变后的页码 页码
    on-page-size-change 切换每页条数时的回调，返回切换后的每页条数 page-size
    Page slot
    名称 说明
    无 自定义显示总数的内容

Breadcrumb

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

Breadcrumb props
属性 说明 类型 默认值
separator 自定义分隔符 String | Element String /
BreadcrumbItem props
属性 说明 类型 默认值
to 链接，不传则没有链接，支持 vue-router 对象 String | Object -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false

Badge

主要用于通知未读数的角标，提醒用户点击。

Badge props
属性 说明 类型 默认值
count 显示的数字，大于overflowCount时，显示${overflowCount}+，为 0 时隐藏 Number -
overflow-count 展示封顶的数字值 Number | String 99
dot 不展示数字，只有一个小红点，如需隐藏 dot ，需要设置count为 0 Boolean false
class-name 自定义的class名称，dot 模式下无效 String -
type 使用预设的颜色，可选值为 success、primary、normal、error、warning、info String -
show-zero 当数值为 0 时，是否展示 Badge Boolean false
status 设置 Badge 为状态点，可选值为 success、processing、default、error、warning String -
text 自定义内容，如果设置了 status，则为状态点的文本 String -
offset 设置状态点的位置偏移，格式为 [x, y] Array -
color 4.0.0 设置更多状态点的颜色或自定义颜色 String -
Badge slot
名称 说明
count 4.0.0 自定义角标显示内容（去角标背景），数值 count 将无效。
text 4.0.0 自定义角标显示内容（带角标背景），数值 count 将无效。亦可自定义状态点模式下的 text 内容。

Anchor

用于跳转到页面指定位置。

Anchor props
属性 说明 类型 默认值
affix 固定模式 Boolean true
offset-top 距离窗口顶部达到指定偏移量后触发 Number 0
offset-bottom 距离窗口底部达到指定偏移量后触发 Number -
bounds 锚点区域边界，单位：px Number 5
scroll-offset 点击滚动的额外距离 Number 0
container 指定滚动的容器 String | HTMLElement -
show-ink 是否显示小圆点 Boolean false
Anchor events
事件名 说明 返回值
on-select 点击锚点时触发，返回链接 href
on-change 链接改变时触发，返回新链接和旧链接 newHref, oldHref
AnchorLink props
属性 说明 类型 默认值
href 锚点链接 String -
title 文字内容 String -
scroll-offset 点击滚动的额外距离 Number 0

Steps

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

Steps props
属性 说明 类型 默认值
current 当前步骤，从 0 开始计数 Number 0
status 当前步骤的状态，可选值为wait、process、finish、error String process
size 步骤条的尺寸，可选值为small或者不写 String -
direction 步骤条的方向，可选值为horizontal（水平）或vertical（垂直） String horizontal
Step props
属性 说明 类型 默认值
status 步骤的状态，可选值为wait、process、finish、error，不设置时自动判断 String process
title 标题 String 空
content 步骤的详细描述，可选 String -
icon 步骤的图标，可选 String -
Step slot
名称 说明
title 4.0.0 自定义 title
content 4.0.0 自定义 content
icon 4.0.0 自定义 icon

LoadingBar

全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。

LoadingBar 只会在全局创建一个,因此在任何位置调用的方法都会控制这同一个组件

LoadingBar instance
  • this.$Loading.start()
  • this.$Loading.finish()
  • this.$Loading.error()
  • this.$Loading.update(percent)
函数名 说明 参数
start 开始从 0 显示进度条，并自动加载进度 无
finish 结束进度条，自动补全剩余进度 无
error 以错误的类型结束进度条，自动补全剩余进度 无
update 精确加载到指定的进度 percent，指定的进度百分比
  • this.$Loading.config(options)
  • this.$Loading.destroy()
this.$Loading.config({color: '#5cb85c',failedColor: '#f0ad4e',height: 5
});
属性 说明 类型 默认值
color 进度条的颜色，默认为 iView 主色 String primary
failedColor 失败时的进度条颜色，默认为 iView 主色 String error
height 进度条高度，单位 px Number 2
duration 3.4.0 隐藏时的持续时间，单位 ms Number 800

表单

Form

Input

Radio

Checkbox

Switch

Table

<Table border :columns="column" :data="row"></Table>
Table props
属性 说明 类型 默认值
data 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，因此数据不能使用该字段，详见示例特定样式。 Array []
columns 表格列的配置描述，具体项见后文 Array []
stripe 是否显示间隔斑马纹 Boolean false
border 是否显示纵向边框 Boolean false
show-header 是否显示表头 Boolean true
width 表格宽度，单位 px Number | String 自动
height 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头 Number | String -
max-height 3.4.0 表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头 Number | String -
loading 表格是否加载中 Boolean false
disabled-hover 禁用鼠标悬停时的高亮 Boolean false
highlight-row 是否支持高亮选中的行，即单选 Boolean false
row-class-name 行的 className 的回调方法，传入参数：row：当前行数据index：当前行的索引 Function -
size 表格尺寸，可选值为 large、small、default 或者不填 String -
no-data-text 数据为空时显示的提示内容 String 暂无数据
no-filtered-data-text 筛选数据为空时显示的提示内容 String 暂无筛选结果
draggable 3.3.0 是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用 Boolean false
tooltip-theme 3.3.0 列使用 tooltip 时，配置它的主题，可选值为 dark 或 light String dark
tooltip-max-width 4.5.0 列使用 tooltip 时，配置 Tooltip 的最大宽，默认是 300 Number 300
row-key 3.4.0 是否强制使用内置的 row-key，开启后可能会影响性能，4.1.0 支持 String Boolean | String false
span-method 4.0.0 合并行或列的计算方法 Function -
show-summary 4.0.0 是否在表尾显示合计行 Boolean false
sum-text 4.0.0 合计行第一列的文本 String 合计
summary-method 4.0.0 自定义的合计计算方法 Function -
indent-size 4.1.0 树形数据缩进宽度，单位 px Number 16
load-data 4.1.0 异步加载树形数据的方法，详见示例 Function -
update-show-children 4.4.0 展开树形数据时，是否需要更新 _showChildren 字段，使用异步树形数据时建议开启 Boolean false
context-menu 4.1.0 当前行点击右键是否会阻止默认行为 Boolean false
show-context-menu 4.2.0 点击右键弹出菜单，需配合 slot contextMenu 一起使用，详见示例 Boolean false
Table events
事件名 说明 返回值
on-current-change 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发 currentRow：当前高亮行的数据oldCurrentRow：上一次高亮的数据
on-select 在多选模式下有效，选中某一项时触发 selection：已选项数据row：刚选择的项数据
on-select-cancel 在多选模式下有效，取消选中某一项时触发 selection：已选项数据row：取消选择的项数据
on-select-all 在多选模式下有效，点击全选时触发 selection：已选项数据
on-select-all-cancel 在多选模式下有效，点击取消全选时触发 selection：已选项数据
on-selection-change 在多选模式下有效，只要选中项发生变化时就会触发 selection：已选项数据
on-sort-change 排序时有效，当点击排序时触发 column：当前列数据key：排序依据的指标order：排序的顺序，值为 asc 或 desc
on-filter-change 筛选时有效，筛选条件发生变化时触发 当前列数据
on-row-click 单击某一行时触发 当前行的数据index
on-row-dblclick 双击某一行时触发 当前行的数据index
on-cell-click 4.2.0 点击单元格时触发 row, column, data, event
on-expand 展开或收起某一行时触发 row：当前行的数据status：当前的状态
on-drag-drop 3.3.0 拖拽排序松开时触发，返回置换的两行数据索引 index1, index2
on-column-width-resize 4.0.0 拖拽调整列宽时触发 newWidth, oldWidth, column, event
on-contextmenu 4.1.0 当前行点击右键时触发 row, event, position
on-expand-tree 4.3.0 展开或收起子数据时触发 row-key, status
Table slot
名称 说明
header 表头
footer 页脚
loading 加载中
contextMenu 4.2.0 右键菜单，详见示例
Table methods
方法名 说明 参数
exportCsv 将数据导出为 .csv 文件，说明：支持IE9~IE11、Edge、Chrome、Safari、Firefox 全系列浏览器。IE9、Safari 需要手动修改后缀名为 .csv。IE9暂时只支持英文，中文会显示为乱码。 params(Object):filename 文件名，默认为 table.csvoriginal 是否导出为原始数据，默认为 truenoHeader 不显示表头，默认为 falsecolumns 自定义导出的列数据data 自定义导出的行数据callback 添加此函数后，不会下载，而是返回数据separator 数据分隔符，默认是逗号(,)quoted 每项数据是否加引号，默认为 false说明：columns 和 data 需同时声明，声明后将导出指定的数据，建议列数据有自定义render时，可以根据需求自定义导出内容
clearCurrentRow 清除高亮项，仅在开启 highlight-row 时可用 无
selectAll 全选/取消全选，详见示例 status
column
属性 说明 类型 默认值
type 列类型，可选值为 index、selection、expand、html String -
title 列头显示文字 String #
key 对应列内容的字段名 String -
width 列宽 Number -
minWidth 最小列宽 Number -
maxWidth 最大列宽 Number -
align 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐 String left
className 列的样式名称 String -
fixed 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 String -
ellipsis 开启后，文本将不换行，超出部分显示为省略号 Boolean false
tooltip 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容 Boolean false
tooltipTheme 4.5.0 配置 Tooltip 的主题，可选值为 dark 或 light String dark
tooltipMaxWidth 4.5.0 配置 Tooltip 的最大宽，默认是 300 Number 300
render 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。 学习 Render 函数的内容 Function -
renderHeader 自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。 Function -
indexMethod type 为 index 时可用，自定义序号 Function，参数 row 为当前行内容 -
sortable 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序，需要监听 Table 的 on-sort-change 事件 Boolean | ‘custom’ false
sortMethod 自定义排序使用的方法，接收三个参数 a 、 b 和 type，当设置 sortable: true 时有效。type 值为 asc 和 desc Function -
sortType 设置初始化排序。值为 asc 和 desc String -
filters 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置 filterMethod Array -
filterMethod 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 Function -
filterMultiple 数据过滤的选项是否多选 Boolean true
filteredValue 在初始化时使用过滤，数组，值为需要过滤的 value 集合 Array -
filterRemote 使用远程过滤 Function -
children 表头分组 Array -
resizable 4.0.0 该列是否允许拖拽调整宽度，需开启 border 属性，且设置 width Boolean false
tree 4.1.0 指定该列为显示展开/收起图标，树形数据时使用 Boolean -
display 4.2.0 使用 slot 自定义列时，列的渲染模式。可选值为 block、inline、inline-block，当使用树形数据时，建议使用 inline 或 inline-block String -

  • Select

    <Select v-model="model1" style="width:200px">        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>   </Select>
    Select props
    属性 说明 类型 默认值
    value 指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array String | Number | Array 空
    multiple 是否支持多选 Boolean false
    disabled 是否禁用 Boolean false
    clearable 是否可以清空选项，只在单选时有效 Boolean false
    filterable 是否支持搜索 Boolean false
    filter-by-label 4.2.0 在搜索时，是否只按照 label 进行搜索 Boolean false
    remote 是否使用远程搜索 Boolean false
    remote-method 远程搜索的方法 Function -
    loading 当前是否正在远程搜索 Boolean false
    loading-text 远程搜索中的文字提示 String 加载中
    label 仅在 remote 模式下，初始化时使用。因为仅通过 value 无法得知选项的 label，需手动设置。 String | Number | Array 空
    default-label4.4.0 远程搜索时，显示默认 label，详见示例 String | Number | Array -
    size 选择框大小，可选值为large、small、default或者不填 String -
    placeholder 选择框默认文字 String 请选择
    not-found-text 当下拉列表为空时显示的内容 String 无匹配数据
    label-in-value 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value Boolean false
    placement 弹窗的展开方向，可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end String bottom-start
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    transfer-class-name 3.3.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    prefix3.4.0 在 Select 内显示图标 String -
    max-tag-count 3.4.0 多选时最多显示多少个 tag Number -
    max-tag-placeholder 3.4.0 隐藏 tag 时显示的内容，参数是剩余项数量 Function -
    allow-create4.0.0 是否允许用户创建新条目，需开启 filterable Boolean false
    capture 4.0.0 是否开启 capture 模式，也可通过全局配置 Boolean true
    Select events
    事件名 说明 返回值
    on-change 选中的Option变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性 当前选中项
    on-query-change 搜索词改变时触发 query
    on-clear 点击清空按钮时触发 无
    on-open-change 下拉框展开或收起时触发 true / false
    on-create 4.0.0 新建条目时触发 query
    on-select 4.1.0 选择项目时触发 当前选中项
    on-set-default-options 4.4.0 配合 default-label 使用，详见示例 options
    Select methods
    方法名 说明 参数
    setQuery 设置搜索词，为空时清空，仅在 filterable="true" 时有效 query
    clearSingleSelect 清空单选项，仅在 clearable="true" 时有效 无
    Select slot
    名称 说明
    prefix 3.4.0 自定义 Select 内头部图标
    Option props
    属性 说明 类型 默认值
    value 选项值，默认根据此属性值进行筛选，必填 String | Number 无
    label 选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值，无 label 时，读取 value。当选中时，选择器会显示 label 为已选文案。大部分情况不需要配置此项，直接写入 slot 即可，在自定义选项时，该属性非常有用。 String -
    disabled 是否禁用当前项 Boolean false
    tag 4.0.0 设置后，在多选时，标签内容会优先显示设置的值 String | Number -
    OptionGroup props
    属性 说明 类型 默认值
    label 分组的组名 String 空

  • AutoCompelet

    <AutoCompletev-model="value1":data="data1"@on-search="handleSearch1"placeholder="input here"style="width:200px">
</AutoComplete>
    AutoComplete props
    属性 说明 类型 默认值
    value 绑定的值，可使用 v-model 双向绑定 String | Number -
    data 自动完成的数据源 Array []
    clearable 是否可以清空选项 Boolean false
    disabled 是否禁用 Boolean false
    placeholder 占位文本 String -
    size 输入框尺寸，可选值为 large、small、default 或者不设置 String -
    icon 输入框尾部图标 String -
    filter-method 是否根据输入项进行筛选。当其为一个函数时，会接收 value 和 option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false Function | Boolean false
    placement 弹窗的展开方向，可选值为 bottom、top、top-start、bottom-start、top-end、bottom-end，2.12.0 版本开始支持自动识别 String bottom-start
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    AutoComplete events
    事件名 说明 返回值
    on-change 选中 option，或 input 的 value 变化时，调用此函数 value
    on-select 被选中时调用，参数为选中项的 value 值 value
    on-search 搜索补全项的时候调用 query
    on-focus 聚焦时触发 event
    on-blur 失焦时触发 event
    on-clear 3.3.0 清空时触发 无

  • Slider

    <Slider v-model="value1"></Slider>
    Slider props
    属性 说明 类型 默认值
    value 滑块选定的值，可以使用 v-model 双向绑定数据。普通模式下，数据格式为数字，在双滑块模式下，数据格式为长度是2的数组，且每项都为数字 Number | Array 0
    min 最小值 Number 0
    max 最大值 Number 100
    step 步长，取值建议能被（max - min）整除 Number 1
    disabled 是否禁用滑块 Boolean false
    range 是否开启双滑块模式 Boolean false
    show-input 是否显示数字输入框，仅在单滑块模式下有效 Boolean false
    show-stops 是否显示间断点，建议在 step 不密集时使用 Boolean false
    show-tip 提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见） String hover
    tip-format Slider 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip Function value
    input-size 数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效 String default
    active-change 3.4.0 同 InputNumber 的 active-change Boolean true
    marks 4.0.0 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 Object -
    Slider events
    事件名 说明 返回值
    on-change 在松开滑动时触发，返回当前的选值，在滑动过程中不会触发 value
    on-input 滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发 value

  • DatePicker

    <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
    DatePicker props
    属性 说明 类型 默认值
    type 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month String date
    value 日期，可以是 JavaScript 的 Date，例如 new Date()，也可以是标准的日期格式，点击右边查看 注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用 [ Date](javascript:void(0)) -
    format 展示的日期格式 [ Date](javascript:void(0)) date | daterange： yyyy-MM-dddatetime | datetimerange： yyyy-MM-dd HH:mm:ssyear：yyyymonth：yyyy-MM
    placement 日期选择器出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，2.12.0 版本开始支持自动识别 String bottom-start
    placeholder 占位文本 String 空
    options 选择器额外配置，比如不可选日期与快捷选项，具体项详见下表 Object -
    split-panels 开启后，左右面板不联动，仅在 daterange 和 datetimerange 下可用。 Boolean false
    multiple 开启后，可以选择多个日期，仅在 date 下可用。 Boolean false
    show-week-numbers 开启后，可以显示星期数。 Boolean false
    start-date 设置默认显示的起始日期。 Date -
    confirm 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭 Boolean false
    open 手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用 Boolean null
    size 尺寸，可选值为large、small、default或者不设置 String -
    disabled 是否禁用选择器 Boolean false
    clearable 是否显示清除按钮 Boolean true
    readonly 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 Boolean false
    editable 文本框是否可以输入，只在没有使用 slot 时有效 Boolean true
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    time-picker-options 可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps：:time-picker-options="{steps: [1, 10, 10]}" Object {}
    separator 3.3.0 两个日期间的分隔符 String -
    capture 4.0.0 是否开启 capture 模式，也可通过全局配置 Boolean true
    transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    options
    属性 说明 类型 默认值
    shortcuts 设置快捷选项，每项内容：text | String：显示的文案value | Function：返回指定的日期，如需自己控制逻辑，可不设置，并使用 onClick 回调onClick | Function：点击时的回调，参数为当前日期选择器的 Vue 实例，当需要自定义复杂操作时，可以使用 Array -
    disabledDate 设置不可选择的日期，参数为当前的日期，需要返回 Boolean 是否禁用这天 Function -
    DatePicker events
    事件名 说明 返回值
    on-change 日期发生变化时触发 返回两个值，已经格式化后的日期，比如 2016-01-01，和当前的日期类型，比如 date
    on-open-change 弹出日历和关闭日历时触发 true | false
    on-ok 在 confirm 模式下有效，点击确定按钮时触发 -
    on-clear 在 confirm 模式或 clearable = true 时有效，在清空日期时触发 -
    on-clickoutside 3.4.0 点击外部关闭下拉菜单时触发 event

    DatePicker slot

    名称 说明
    无 自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例

  • TimePicker

    <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
    TimePicker props
    属性 说明 类型 默认值
    type 显示类型，可选值为 time、timerange String time
    value 时间，可以是 JavaScript 的 Date，例如 new Date()，也可以是标准的时间格式，点击右边查看 注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用 [ Date](javascript:void(0)) -
    format 展示的时间格式 [ Date](javascript:void(0)) HH:mm:ss
    steps 下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。 Array []
    placement 时间选择器出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，2.12.0 版本开始支持自动识别 String bottom-start
    placeholder 占位文本 String 空
    confirm 是否显示底部控制栏 Boolean false
    open 手动控制时间选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用 Boolean null
    size 尺寸，可选值为large、small、default或者不设置 String -
    disabled 是否禁用选择器 Boolean false
    clearable 是否显示清除按钮 Boolean true
    readonly 完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效 Boolean false
    editable 文本框是否可以输入，只在没有使用 slot 时有效 Boolean true
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    separator 3.3.0 两个日期间的分隔符 String -
    capture 4.0.0 是否开启 capture 模式，也可通过全局配置 Boolean true
    transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    TimePicker events
    事件名 说明 返回值
    on-change 时间发生变化时触发 已经格式化后的时间，比如 09:41:00
    on-open-change 弹出浮层和关闭浮层时触发 true | false
    on-ok 点击确定按钮时触发 -
    on-clear 在清空日期时触发 -
    TimePicker slot
    名称 说明
    无 自定义选择器的显示内容，建议与 open 等参数一起使用，详见示例

  • Cascader

    <Cascader :data="data" v-model="value1"></Cascader>
    Cascader props
    属性 说明 类型 默认值
    data 可选项的数据源，格式参照示例说明 Array []
    value 当前已选项的数据，格式参照示例说明 Array []
    render-format 选择后展示的函数，用于自定义显示格式 Function label => label.join(’ / ')
    disabled 是否禁用选择器 Boolean false
    clearable 是否支持清除 Boolean true
    placeholder 输入框占位符 String 请选择
    trigger 次级菜单展开方式，可选值为 click 或 hover String click
    change-on-select 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例 Boolean false
    size 输入框大小，可选值为large和small或者不填 String -
    load-data 动态获取数据，数据源需标识 loading Function -
    filterable 是否支持搜索 Boolean false
    not-found-text 当搜索列表为空时显示的内容 String 无匹配数据
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    Cascader events
    事件名 说明 返回值
    on-change 选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据 value, selectedData
    on-visible-change 展开和关闭弹窗时触发 显示状态，Boolean

  • Transfer

    <Transfer:data="data1":target-keys="targetKeys1":render-format="render1"@on-change="handleChange1">
</Transfer>
    Transfer props
    属性 说明 类型 默认值
    data 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外。 Array []
    targetKeys 显示在右侧框数据的key集合 Array []
    render-format 每行数据渲染函数，该函数的入参为 data 中的项 Function 默认显示label，没有时显示key
    selected-keys 设置哪些项应该被选中 Array []
    list-style 两个穿梭框的自定义样式 Object {}
    titles 标题集合，顺序从左至右 Array [‘源列表’, ‘目的列表’]
    operations 操作文案集合，顺序从上至下 Array []
    reverse-operation 4.2.0 是否颠倒两个操作按钮的上下顺序 Boolean false
    filterable 是否显示搜索框 Boolean false
    filter-placeholder 搜索框的占位 String 请输入搜索内容
    filter-method 自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词 Function 默认搜索label
    not-found-text 当列表为空时显示的内容 String 列表为空
    Transfer events
    事件名 说明 返回值
    on-change 选项在两栏之间转移时的回调函数 targetKeys, direction, moveKeys
    on-selected-change 选中项发生变化时触发 sourceSelectedKeys, targetSelectedKeys
    Transfer slot
    名称 说明
    无 自定义底部内容

  • InputNumber

    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
    InputNumber props
    属性 说明 类型 默认值
    max 最大值 Number Infinity
    min 最小值 Number -Infinity
    value 当前值，可以使用 v-model 双向绑定数据 Number 1
    controls-outside 4.5.0 按钮位置是否置于两侧 Boolean false
    step 每次改变的步伐，可以是小数 Number 1
    size 输入框尺寸，可选值为large、small、default或者不填 String -
    disabled 设置禁用状态 Boolean false
    placeholder 占位文本 String -
    formatter 指定输入框展示值的格式 Function -
    parser 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 Function -
    readonly 是否设置为只读 Boolean false
    editable 是否可编辑 Boolean true
    precision 数值精度 Number -
    element-id 给表单元素设置 id，详见 Form 用法。 String -
    active-change 是否实时响应数据，设置为 false 时，只会在失焦时更改数据 Boolean true
    InputNumber events
    事件名 说明 返回值
    on-change 数值改变时的回调，返回当前值 当前值
    on-focus 聚焦时触发 event
    on-blur 失焦时触发 -

  • Rate

    <Rate v-model="value" />
    Rate props
    属性 说明 类型 默认值
    count star 总数 Number 5
    value 当前 star 数，可以使用 v-model 双向绑定数据 Number 0
    allow-half 是否允许半选 Boolean false
    disabled 是否只读，无法进行交互 Boolean false
    show-text 是否显示提示文字 Boolean false
    clearable 是否可以取消选择 Boolean false
    character 自定义字符 String -
    icon 使用图标 String -
    custom-icon 使用自定义图标 String -

  • Upload

    <Upload action="//jsonplaceholder.typicode.com/posts/"><Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
    Upload props
    属性 说明 类型 默认值
    action 上传的地址，必填 String -
    headers 设置上传的请求头部 Object {}
    multiple 是否支持多选文件 Boolean false
    paste 是否支持粘贴上传文件 Boolean false
    webkitdirectory 4.4.0 是否开启选择文件夹，部分浏览器适用 Boolean false
    disabled 3.3.0 是否禁用 Boolean false
    data 上传时附带的额外参数 Object -
    name 上传的文件字段名 String file
    with-credentials 支持发送 cookie 凭证信息 Boolean false
    show-upload-list 是否显示已上传文件列表 Boolean true
    type 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽） String select
    accept 接受上传的文件类型 String -
    format 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 Array []
    max-size 文件大小限制，单位 kb Number -
    before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 Function -
    on-progress 文件上传时的钩子，返回字段为 event, file, fileList Function -
    on-success 文件上传成功时的钩子，返回字段为 response, file, fileList Function -
    on-error 文件上传失败时的钩子，返回字段为 error, file, fileList Function -
    on-preview 点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据 Function -
    on-remove 文件列表移除文件时的钩子，返回字段为 file, fileList Function -
    on-format-error 文件格式验证失败时的钩子，返回字段为 file, fileList Function -
    on-exceeded-size 文件超出指定大小限制时的钩子，返回字段为 file, fileList Function -
    default-file-list 默认已上传的文件列表，例如：[ { name: 'img1.jpg', url: 'http://www.xxx.com/img1.jpg' }, { name: 'img2.jpg', url: 'http://www.xxx.com/img2.jpg' } ] Array []
    Upload methods
    方法名 说明 参数
    clearFiles 清空已上传的文件列表 无
    Upload slot
    名称 说明
    无 触发上传组件的控件
    tip 辅助提示内容

  • ColorPicker

    <ColorPicker v-model="color1" />
    ColorPicker props
    属性 说明 类型 默认值
    value 绑定的值，可使用 v-model 双向绑定 String -
    disabled 是否禁用 Boolean false
    editable 是否可以输入色值 Boolean true
    alpha 是否支持透明度选择 Boolean false
    hue 是否支持色彩选择 Boolean true
    recommend 是否显示推荐的颜色预设 Boolean false
    colors 自定义颜色预设 Array []
    format 颜色的格式，可选值为 hsl、hsv、hex、rgb String 开启 alpha 时为 rgb，其它为 hex
    size 尺寸，可选值为large、small、default或者不设置 String -
    transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
    capture 4.0.0 是否开启 capture 模式，也可通过全局配置 Boolean true
    transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
    ColorPicker events
    事件名 说明 返回值
    on-change 当绑定值变化时触发 当前值
    on-active-change 面板中当前显示的颜色发生改变时触发 当前显示的颜色值
    on-open-change 下拉框展开或收起时触发 true / false

视图

<ColorPicker v-model="color1" />

Alert

<Alert type="success">A success prompt</Alert>
Alert props
属性 说明 类型 默认值
type 警告提示样式，可选值为info、success、warning、error String info
closable 是否可关闭 Boolean false
show-icon 是否显示图标 Boolean false
Alert events
事件名 说明 返回值
on-close 关闭时触发 event
Alert slot
名称 说明
无 警告提示内容
desc 警告提示辅助性文字介绍
icon 自定义图标内容
close 自定义关闭内容

Message

<Button type="primary" @click="info">Display info prompt</Button>
Message instance
  • this.$Message.info(config)
  • this.$Message.success(config)
  • this.$Message.warning(config)
  • this.$Message.error(config)
  • this.$Message.loading(config)
属性 说明 类型 默认值
content 提示内容 String -
render 自定义描述内容，使用 Vue 的 Render 函数 Function -
duration 自动关闭的延时，单位秒，不关闭可以写 0 Number 1.5
onClose 关闭时的回调 Function -
closable 是否显示关闭按钮 Boolean false
background 4.0.0 是否显示背景色 Boolean false
  • this.$Message.config(options)
  • this.$Message.destroy()
this.$Message.config({top: 50,duration: 3
});
属性 说明 类型 默认值
top 提示组件距离顶端的距离，单位像素 Number 24
duration 默认自动关闭的延时，单位秒 Number 1.5

Notice

 <Button type="primary" @click="open(false)">Open notice</Button><Button @click="open(true)">Open notice(only title)</Button>
Notice instance
  • this.$Notice.open(config)
  • this.$Notice.info(config)
  • this.$Notice.success(config)
  • this.$Notice.warning(config)
  • this.$Notice.error(config)
属性 说明 类型 默认值
title 通知提醒的标题 String -
desc 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式 String -
render 自定义描述内容，使用 Vue 的 Render 函数，如果同时设置了 render 和 desc，则只显示 render 的内容 Function -
duration 自动关闭的延时，单位秒，不关闭可以写 0 Number 4.5
name 当前通知的唯一标识 String 自动
onClose 关闭时的回调 Function -
  • this.$Notice.config(options)
  • this.$Notice.close(name)
  • this.$Notice.destroy()
this.$Notice.config({top: 50,duration: 3
});
属性 说明 类型 默认值
top 通知组件距离顶端的距离，单位像素 Number 24
duration 默认自动关闭的延时，单位秒 Number 4.5

Modal

<Button type="primary" @click="modal1 = true">Display dialog box</Button><Modalv-model="modal1"title="Common Modal dialog box title"@on-ok="ok"@on-cancel="cancel"><p>Content of dialog</p><p>Content of dialog</p><p>Content of dialog</p></Modal>
Modal props
属性 说明 类型 默认值
value 对话框是否显示，可使用 v-model 双向绑定数据。 Boolean false
title 对话框标题，如果使用 slot 自定义了页头，则 title 无效 String -
closable 是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭 Boolean true
mask-closable 是否允许点击遮罩层关闭 Boolean true
loading 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动设置value来关闭对话框 Boolean false
scrollable 页面是否可以滚动 Boolean false
fullscreen 是否全屏显示 Boolean false
draggable 是否可以拖拽移动 Boolean false
mask 是否显示遮罩层，开启 draggable 时，强制不显示 Boolean true
ok-text 确定按钮文字 String 确定
cancel-text 取消按钮文字 String 取消
width 对话框宽度，对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动auto。当其值不大于 100 时以百分比显示，大于 100 时为像素 Number | String 520
footer-hide 不显示底部 Boolean false
styles 设置浮层样式，调整浮层位置等，该属性设置的是.ivu-modal的样式 Object -
class-name 设置对话框容器.ivu-modal-wrap的类名，可辅助实现垂直居中等自定义效果 String -
z-index 层级 Number 1000
transition-names 自定义显示动画，第一项是模态框，第二项是背景 Array [‘ease’, ‘fade’]
transfer 是否将弹层放置于 body 内 Boolean true
lock-scroll 4.4.0 是否禁止对页面滚动条的修改 Boolean false
Modal events
事件名 说明 返回值
on-ok 点击确定的回调 无
on-cancel 点击取消的回调 无
on-visible-change 显示状态发生变化时触发 true / false
Modal slot
名称 说明
header 自定义页头
footer 自定义页脚内容
close 自定义右上角关闭内容
无 对话框主体内容
Modal instance
  • this.$Modal.info(config)
  • this.$Modal.success(config)
  • this.$Modal.warning(config)
  • this.$Modal.error(config)
  • this.$Modal.confirm(config)
  • this.$Modal.remove()
属性 说明 类型 默认值
title 标题 String | Element String -
content 内容 String | Element String -
render 自定义内容，使用后不再限制类型， content 也无效。 学习 Render 函数的内容 Function -
width 宽度，单位 px Number | String 416
okText 确定按钮的文字 String 确定
cancelText 取消按钮的文字，只在Modal.confirm()下有效 String 取消
loading 点击确定按钮时，确定按钮是否显示 loading 状态，开启则需手动调用Modal.remove()来关闭对话框 Boolean false
scrollable 页面是否可以滚动 Boolean false
closable 是否可以按 Esc 键关闭 Boolean false
onOk 点击确定的回调 Function -
onCancel 点击取消的回调，只在Modal.confirm()下有效 Function -
lock-scroll 4.4.0 是否禁止对页面滚动条的修改 Boolean false

Drawer

<Button @click="value1 = true" type="primary">Open</Button>
<Drawer title="Basic Drawer" :closable="false" v-model="value1"><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p>
</Drawer>
Drawer props
属性 说明 类型 默认值
value 抽屉是否显示，可使用 v-model 双向绑定数据 Boolean false
title 抽屉标题，如果使用 slot 自定义了页头，则 title 无效 String -
width 抽屉宽度。当其值不大于 100 时以百分比显示，大于 100 时为像素 Number | String 256
closable 是否显示右上角的关闭按钮 Boolean true
mask-closable 是否允许点击遮罩层关闭 Boolean true
mask 是否显示遮罩层 Boolean true
mask-style 遮罩层样式 Object -
styles 抽屉中间层的样式 Object -
scrollable 页面是否可以滚动 Boolean false
placement 抽屉的方向，可选值为 left 或 right String right
transfer 是否将抽屉放置于 body 内 Boolean true
class-name 设置抽屉容器.ivu-drawer-wrap的类名 String -
inner 是否设置抽屉在某个元素内打开，开启此属性时，应当关闭 transfer 属性 Boolean false
draggable 3.3.0 是否开启拖拽调整宽度 Boolean false
before-close 3.3.0 返回 Promise 可以阻止关闭 Function -
lock-scroll 4.4.0 是否禁止对页面滚动条的修改 Boolean false
Drawer events
事件名 说明 返回值
on-close 关闭抽屉时触发 无
on-visible-change 显示状态发生变化时触发 true / false
on-resize-width 3.3.0 调整宽度时触发 width
Drawer slot
名称 说明
header 自定义标题栏
close 自定义右上角关闭内容
trigger 3.3.0 自定义调整宽度节点
默认 抽屉主体内容

Tree

<Tree :data="data1"></Tree>
Tree props
属性 说明 类型 默认值
data 可嵌套的节点属性的数组，生成 tree 的数据 Array []
multiple 是否支持多选 Boolean false
show-checkbox 是否显示多选框 Boolean false
empty-text 没有数据时的提示 String 暂无数据
load-data 异步加载数据的方法，见示例 Function -
render 自定义渲染内容，见示例 Function -
children-key 定义子节点键 String children
check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 Boolean false
check-directly 3.3.0 开启后，在 show-checkbox 模式下，select 的交互也将转为 check Boolean false
select-node 4.4.0 开启后，点击节点将使用单选效果 Boolean true
expand-node 4.4.0 开启后，点击节点将使用展开/收起子节点效果，该选项优先于 select-node Boolean false
Tree events
事件名 说明 返回值
on-select-change 点击树节点时触发 当前已选中的节点数组、当前项
on-check-change 点击复选框时触发 当前已勾选节点的数组、当前项
on-toggle-expand 展开和收起子列表时触发 当前节点的数据
on-contextmenu 4.3.0 当前节点点击右键时触发 data, event, position
Tree slot
名称 说明
contextMenu 4.3.0 右键菜单，详见示例
Tree methods
方法名 说明 参数
getCheckedNodes 获取被勾选的节点 无
getSelectedNodes 获取被选中的节点 无
getCheckedAndIndeterminateNodes 获取选中及半选节点 无
children
属性 说明 类型 默认值
title 标题 String | Element String -
expand 是否展开直子节点 Boolean false
disabled 禁掉响应 Boolean false
disableCheckbox 禁掉 checkbox Boolean false
selected 是否选中子节点 Boolean false
checked 是否勾选(如果勾选，子节点也会全部勾选) Boolean false
children 子节点属性数组 Array -
render 自定义当前节点渲染内容，见示例 Function -
contextmenu 4.3.0 是否支持右键菜单 Boolean false

Tooltip

<Tooltip content="Here is the prompt text">A balloon appears when the mouse passes over this text
</Tooltip>
Tooltip props
属性 说明 类型 默认值
content 显示的内容 String | Number 空
placement 提示框出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，2.12.0 版本开始支持自动识别 String bottom
disabled 是否禁用提示框 Boolean false
delay 延迟显示，单位毫秒 Number 0
always 是否总是可见 Boolean false
theme 主题，可选值为 dark 或 light String dark
max-width 最大宽度，超出最大值后，文本将自动换行，并两端对齐 String | Number -
offset 出现位置的偏移量 Number 0
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
options 自定义 popper.js 的配置项，具体配置见 popper.js 文档 Object { modifiers: { computeStyle:{ gpuAcceleration: false, }, preventOverflow :{ boundariesElement: 'window' } } }
transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
Tooltip events
事件名 说明 返回值
on-popper-show 在提示框显示时触发 无
on-popper-hide 在提示框消失时触发 无
Tooltip slot
名称 说明
无 主体内容
content 提示框的内容，定义此 slot 时，会覆盖 props content。

Poptip

<Poptip trigger="hover" title="Title" content="content"><Button>Hover</Button>
</Poptip>
Poptip props
属性 说明 类型 默认值
trigger 触发方式，可选值为hover（悬停）click（点击）focus（聚焦）,在 confirm 模式下，只有 click 有效 String click
title 显示的标题 String | Number -
content 显示的正文内容，只在非 confirm 模式下有效 String | Number 空
placement 提示框出现的位置，可选值为top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，2.12.0 版本开始支持自动识别 String top
width 宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px String | Number -
confirm 是否开启对话框模式 Boolean false
disabled 3.4.0 是否禁用 Boolean false
ok-text 确定按钮的文字，只在 confirm 模式下有效 String 确定
cancel-text 取消按钮的文字，只在 confirm 模式下有效 String 取消
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
popper-class 给 Poptip 设置 class-name，在使用 transfer 时会很有用 String -
word-wrap 开启后，超出指定宽度文本将自动换行，并两端对齐 Boolean false
padding 自定义间距值 String 8px 16px
offset 出现位置的偏移量 Number 0
options 自定义 popper.js 的配置项，具体配置见 popper.js 文档 Object { modifiers: { computeStyle:{ gpuAcceleration: false, }, preventOverflow :{ boundariesElement: 'window' } } }
transfer-class-name 4.4.0 开启 transfer 时，给浮层添加额外的 class 名称 String -
Poptip events
事件名 说明 返回值
on-popper-show 在提示框显示时触发 无
on-popper-hide 在提示框消失时触发 无
on-ok 点击确定的回调，只在 confirm 模式下有效 无
on-cancel 点击取消的回调，只在 confirm 模式下有效 无
Poptip slot
名称 说明
无 主体内容
title 提示框标题，定义此 slot 时，会覆盖 props title
content 提示框内容，定义此 slot 时，会覆盖 props content，只在非 confirm 模式下有效

Progress

<Progress :percent="25" />
Progress props
属性 说明 类型 默认值
percent 百分比 Number 0
status 状态，可选值为normal、active、wrong、success String normal
stroke-width 进度条的线宽，单位 px Number 10
stroke-color 3.3.0 进度条的颜色，4.0.0 开始支持传入数组，显示为渐变色 String | Array -
hide-info 隐藏数值或状态图标 Boolean false
vertical 是否在垂直方向显示 Boolean false
success-percent 已完成的分段百分比 Number 0
text-inside 4.0.0 百分比是否置于进度条内 Boolean false
Progress slot
名称 说明
无 自定义显示状态内容

Avatar

<Avatar icon="ios-person" size="large" />
<Avatar>USER</Avatar>
Avatar props
属性 说明 类型 默认值
shape 指定头像的形状，可选值为 circle、square String circle
size 设置头像的大小，可选值为 large、small、default，4.0.0 版本开始支持设置具体数值 String | Number default
src 图片类头像的资源地址 String -
icon 设置头像的图标类型，参考 Icon 组件 String -
custom-icon 自定义图标 String -
Avatar events
事件名 说明 返回值
on-error 3.3.0 在设置 src 且图片加载不成功时触发 event

Tag

<Tag type="border">标签三</Tag>
<Tag type="border" closable>标签四</Tag>
<Tag type="dot">标签一</Tag>
<Tag type="dot" closable>标签二</Tag>
Tag props
属性 说明 类型 默认值
closable 标签是否可以关闭 Boolean false
checkable 标签是否可以选择 Boolean false
checked 标签的选中状态 Boolean true
type 标签的样式类型，可选值为 border、dot或不填 String -
color 标签颜色，预设颜色值为default、primary、success、warning、error、blue、green、red、yellow、pink、magenta、volcano、orange、gold、lime、cyan、geekblue、purple，你也可以自定义颜色值。 String default
name 当前标签的名称，使用 v-for，并支持关闭时，会比较有用 String | Number -
fade 是否在出现和消失时使用渐变的动画，动画时长可能会引起占位的闪烁 Boolean true
size 4.0.0 尺寸，可选值为 large、medium、default String default
Tag events
事件名 说明 返回值
on-close 关闭时触发 event, name
on-change 切换选中状态时触发 checked, name

Carousel

 <Carousel v-model="value1" loop><CarouselItem><div class="demo-carousel">1</div></CarouselItem><CarouselItem><div class="demo-carousel">2</div></CarouselItem><CarouselItem><div class="demo-carousel">3</div></CarouselItem><CarouselItem><div class="demo-carousel">4</div></CarouselItem>
</Carousel>
Carousel props
属性 说明 类型 默认值
value 幻灯片的索引，从 0 开始，可以使用 v-model 双向绑定数据 Number 0
height 走马灯的高度，可填 auto 或具体高度数值，单位 px String | Number auto
loop 是否开启循环 Boolean false
autoplay 是否自动切换 Boolean false
autoplay-speed 自动切换的时间间隔，单位为毫秒 Number 2000
dots 指示器的位置，可选值为 inside （内部），outside（外部），none（不显示） String inside
radius-dot 是否显示圆形指示器 Boolean false
trigger 指示器的触发方式，可选值为 click（点击），hover（悬停） String click
arrow 切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示） String hover
easing 动画效果 String ease
Carousel events
事件名 说明 返回值
on-change 幻灯片切换时触发，目前激活的幻灯片的索引，原幻灯片的索引 oldValue, value
on-click 4.1.0 点击幻灯片时触发，返回索引值 index

Timeline

<Timeline><TimelineItem><p class="time">1976年</p><p class="content">Apple I 问世</p></TimelineItem><TimelineItem><p class="time">1984年</p><p class="content">发布 Macintosh</p></TimelineItem><TimelineItem><p class="time">2007年</p><p class="content">发布 iPhone</p></TimelineItem><TimelineItem><p class="time">2010年</p><p class="content">发布 iPad</p></TimelineItem><TimelineItem><p class="time">2011年10月5日</p><p class="content">史蒂夫·乔布斯去世</p></TimelineItem>
</Timeline>
Timeline props
属性 说明 类型 默认值
pending 指定是否最后一个节点为幽灵节点 Boolean false
TimelineItem props
属性 说明 类型 默认值
color 圆圈颜色，可选值为blue、red、green，或自定义色值 String blue
TimelineItem slot
名称 说明
dot 自定义时间轴点内容
无 基本内容

Time

<Time :time="time1" />
<br>
<Time :time="time2" />
Time props
属性 说明 类型 默认值
time 需要对比的时间，可以是时间戳或 Date 类型 Number | Date | String -
type 类型，可选值为 relative、date 或 datetime String relative
interval 自动更新的间隔，单位：秒 Number 60
hash 填写该值，点击会定位锚点 String -

图表

Circle

<Circle :percent="80"><span class="demo-Circle-inner" style="font-size:24px">80%</span>
</Circle>
Circle props
属性 说明 类型 默认值
percent 百分比 Number 0
size 图表的宽度和高度，单位 px Number 120
stroke-linecap 进度环顶端的形状，可选值为square（方）和round（圆） String round
stroke-width 进度环的线宽，单位 px Number 6
stroke-color 进度环的颜色，4.0.0 版本开始支持传入数组显示为渐变色 String | Array #2db7f5
trail-width 进度环背景的线宽，单位 px Number 5
trail-color 进度环背景的颜色 String #eaeef2
dashboard 是否显示为仪表盘 Boolean false
Circle slot
名称 说明
无 自定义显示中间内容，内容默认垂直居中

其他

Affix

<Affix><span class="demo-affix">Fixed at the top</span>
</Affix>
Affix props
属性 说明 类型 默认值
offset-top 距离窗口顶部达到指定偏移量后触发 Number 0
offset-bottom 距离窗口底部达到指定偏移量后触发 Number -
use-capture 4.1.0 addEventListener 原生的 useCapture 选项 Boolean false
Affix events
事件名 说明 返回值
on-change 在固定状态发生改变时触发 true | false

Back Top

<BackTop></BackTop>
BackTop props
属性 说明 类型 默认值
height 页面滚动高度达到该值时才显示BackTop组件 Number 400
bottom 组件距离底部的距离 Number 30
right 组件距离右部的距离 Number 30
duration 滚动动画持续时间，单位 毫秒 Number 1000
BackTop events
事件名 说明 返回值
on-click 点击按钮时触发 无

Spin

<Spin></Spin>
Spin props
属性 说明 类型 默认值
size Spin尺寸，可选值为large和small或者不设置 String -
fix 是否固定，需要父级有relative或absolute Boolean false
Spin slot
名称 说明
无 自定义 Spin 的内容，设置slot后，默认的样式不生效

Scroll

<Scroll :on-reach-bottom="handleReachBottom"><Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">Content {{ item }}</Card>
</Scroll>
Scroll props
属性 说明 类型 默认值
height 滚动区域的高度，单位像素 String | Number 300
loading-text 加载中的文案 String 加载中
on-reach-top 滚动至顶部时触发，需返回 Promise Function -
on-reach-bottom 滚动至底部时触发，需返回 Promise Function -
on-reach-edge 滚动至顶部或底部时触发，需返回 Promise Function -
distance-to-edge 从边缘到触发回调的距离。如果是负的，回调将在到达边缘之前触发。值最好在 24 以下。 Number | Array [20, 20]

iview学习帮助文档相关推荐

  1. 深度学习在文档矫正中的应用

    深度学习在文档矫正中的应用 一.扫描文稿 在日常生活中,我们经常会使用到扫描文稿的功能.包括IOS备忘录自带的扫描功能.扫描全能王等,文稿扫描给我们带来了许多便利.文稿扫描可以应对的范围非常广.包括身 ...

  2. （六）MkDocs学习——部署文档

    mkdocs学习笔记系列 (一)MkDocs 学习--快速开始 (二)MkDocs学习笔记--撰写文档 (三)MkDocs学习--配置主题 (四)MkDocs学习--自定义主题 (五)MkDocs学习 ...

  3. linux 文档操作,Linux学习之文档操作

    8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? The Linux Command Line 学习翻译 mkdir The mkdir command is used ...

  4. 各种学习资源 文档、手册 （Docker 、springboot 、Guava、git、logback 、Linux 、MQ、vue、Axios）

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. Docker 中文手册 :https://yeasy.gitbooks.io/docker_p ...

  5. jQuery学习之八---文档处理

    Hi~ o(￣▽￣)ブ,大家好,好久不见啊,萍子近两个星期专心做了一个前后台合作的电商网站的项目,好累啊,但是又有点想念CSDN上的你们了,所以萍子马上马立刻立的就过来了,嘿嘿~有没有一点小感动啊. ...

  6. java学习输出文档

    知识地图 一.类设计 1.面向对象的设计思想的理解 面向对象vs面向过程(洗衣服) 封装: ​ 就是把内部的东西保护起来,不被外界所看到. 继承: ​ 就是用于类的扩展 多态: ​ 概念:同一操作作用 ...

  7. 尚硅谷Docker实战教程学习总结文档

    目录 Docker与微服务实战(2022版) 1.基础篇(零基础小白) 1.1.Docker简介 1.1.1.怎么去学习Docker 1.1.2.是什么 1.1.2.1.为什么会有docker的出现? ...

  8. java学习资料文档和视频（转）

    JAVA: FreeMarker应用指导(中文PDF电子书) http://www.hztraining.com/bbs/showtopic-708.aspx JSP动态网站技术入门与提高(PDF电子 ...

  9. 深入学习OpenCV文档扫描OCR识别及答题卡识别判卷（文档扫描，图像矫正，透视变换，OCR识别）

    人工智能学习离不开实践的验证,推荐大家可以多在FlyAI-AI竞赛服务平台多参加训练和竞赛,以此来提升自己的能力.FlyAI是为AI开发者提供数据竞赛并支持GPU离线训练的一站式服务平台.每周免费提供 ...

最新文章

  1. 实现第一个自定义nginx模块
  2. 【高效使用】生产力提升
  3. java swing图形界面开发 java.swing简介
  4. 转-WinRM service
  5. 分段函数（信息学奥赛一本通-T1051）
  6. gamma校正_Log与Gamma校正视频
  7. 字节AI LAB NLP算法二面凉+被捞后通过
  8. Hadoop之crontab与ntpd
  9. 背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题
  10. Windows Server 2019 Datacenter OVF 模板 百度网盘 下载
  11. 良葛格学习笔记输入输入一章中的PushbackInputStream的补充
  12. Predicting microRNA–disease associations from lncRNA–microRNA interactions via Multiview Multitask
  13. “管中窥豹”，MyCAT的基因缺陷
  14. mysql建表是要注意什么问题_MySQL建表注意事项
  15. 水果店圈子：水果店怎么入门，水果店工作注意什么
  16. 11种典型的时间序列回归预测方法大集合——附代码
  17. Linux | 运行虚拟电脑时发生严重错误，应将其关闭
  18. [Swift]获取设备当前连接的WiFi信息
  19. 数据结构中遍历的意义
  20. 浪潮云海OS C位出道 融合开放基础设施呼之欲出

热门文章

  1. linux硬盘自动停转,求助硬盘异常系统自动挂起导致宕机
  2. 16位汇编语言第二讲系统调用原理,以及各个寄存器详解
  3. 刻薄是因为底子薄，尖酸是因为心里酸
  4. FortiGate防火墙GRE隧道监控
  5. 【MongoDB 快速上手】别找了，主流开源分布式系统存储系统三剑客：FastDFS、Minio、MongoDB零基础入门实战教程！
  6. 潮阳实验学校文件服务器,【潮实】潮阳实验学校校歌（调教用）
  7. python从入门到入魔第三天——time库和datetime库基本使用
  8. Web渗透攻击之vega
  9. 水利水电课程指导之建筑制图基础_第一章1.3 平面图形的尺寸标注
  10. ldd 执行结果：不是动态可执行文件