iview学习帮助文档

最新推荐文章于 2025-02-03 15:45:23 发布

Zing-Young

最新推荐文章于 2025-02-03 15:45:23 发布

阅读量3.7k

点赞数 1

分类专栏： iview 文章标签： vue.js ui

本文链接：https://blog.csdn.net/weixin_40885337/article/details/115218034

版权

iview 专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了iView框架的使用，包括安装、按需引用、全局配置、主题定制和各种组件的属性、事件与插槽。内容涵盖按钮、图标、布局、导航、表单、视图等多个方面，提供了丰富的示例和配置说明，帮助开发者更好地理解和应用iView。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装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	有链接时，可自定义右侧箭头

属性	说明	类型	默认值
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-label`4.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	-
prefix`3.4.0`	在 Select 内显示图标	String	-
max-tag-count `3.4.0`	多选时最多显示多少个 tag	Number	-
max-tag-placeholder `3.4.0`	隐藏 tag 时显示的内容，参数是剩余项数量	Function	-
allow-create`4.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

<AutoComplete
        v-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>
    <Modal
        v-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]