Element-UI参数与注意事项

详细内容,见官方文档:element-ui文档

1.布局

置顶:标签内属性(Attributes)的使用方式为:

  • <el-row :gutter = "6">
  • <el-button type="primary">

分栏偏移:

    <el-row :gutter="20">
      <el-col :span="6" ><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

效果图如下:

image-20200729142827222

注意了offset表示的是从左边开始偏,偏移的位置是从span剩下的24份中的几分,按照百分比来偏移的。

比如

响应式布局:

  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>

上面有四个属性,xssmmdlg它们的作用分别是:

  • xs:浏览器窗口宽度最小时显示的比例;
  • sm:浏览器窗口宽度较小时显示的比例;
  • md:浏览器窗口宽度中等时显示的比例;
  • lg:浏览器窗口宽度最大时显示的比例;

可以通过调节这四个属性的比例数来决定浏览器不同宽度下的布局;

不一定四个属性都要加,看需要多少中响应式支持。

Row Attributes

参数 说明 类型 可选值 默认值
:gutter 栅格间隔 number 0
type 布局模式,可选 flex,现代浏览器下有效 string
justify flex 布局下的水平排列方式 string start/end/center/space-around/space-between start
align flex 布局下的垂直排列方式 string top/middle/bottom top
tag 自定义元素标签 string * div

Col Attributes

参数 说明 类型 可选值 默认值
:span 栅格占据的列数 number 24
:offset 栅格左侧的间隔格数 number 0
push 栅格向右移动格数 number 0
pull 栅格向左移动格数 number 0
:xs <768px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
:sm ≥768px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
:md ≥992px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
:lg ≥1200px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
:xl ≥1920px 响应式栅格数或者栅格属性对象 number/object (例如: {span: 4, offset: 4})
tag 自定义元素标签 string * div

2.看文档的注意事项

image-20200729144430876

如上图所示,这里的参数是写在标签内的属性:

<el-row type="flex" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<el-row :gutter="20" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

如上述代码所示,这里的属性有两种写法:

  • 动态绑定属性值:(:gutter="20");
  • 直接写:(type);

具体那种才是正确的使用方式,参照文档;

3.Container 布局容器

注意看如下布局:

image-20200729145043708

代码为:

<el-container>  								<!-- 第1层容器 -->
  <el-header>Header</el-header> 				<!-- 第2层容器,并列header -->
  <el-container> 								<!-- 第2层容器 -->
    <el-aside width="200px">Aside</el-aside> 	<!-- 第3层容器,并列aside -->
    <el-container> 								<!-- 第3层容器 -->
      <el-main>Main</el-main>					<!-- 第3层容器内main -->
      <el-footer>Footer</el-footer>				<!-- 第3层容器内footer -->
    </el-container>
  </el-container>
</el-container>

也就是说,element-ui是按行分容器的;原则是:大于一个部分的内容都使用一个容器包裹

  • 首先,整个页面用一个容器包起来;

  • 然后,可以分为header和header之外两个部分;

  • header之外部分用一个容器(container)存放,也就是第二层容器。

  • 第二层容器内可分为aside和aside之外部分。所以可以将aside之外部分放入一个容器中,也就是第三层容器;

  • 第三层容器内放入main和footer两个部分。

Container Attributes

参数 说明 类型 可选值 默认值
direction 子元素的排列方向 string horizontal / vertical 子元素中有 el-headerel-footer 时为 vertical,否则为 horizontal

Header Attributes

参数 说明 类型 可选值 默认值
height 顶栏高度 string 60px

Aside Attributes

参数 说明 类型 可选值 默认值
width 侧边栏宽度 string 300px
参数 说明 类型 可选值 默认值
height 底栏高度 string 60px

4.按钮button

按钮的属性对照表:

Attributes

参数 说明 类型 可选值 默认值
size 尺寸 string medium / small / mini
type 类型 string primary / success / warning / danger / info / text
plain 是否朴素按钮 boolean false
round 是否圆形按钮 boolean false
:loading 是否加载中状态 boolean false
disabled 是否禁用状态 boolean false
icon 图标类名 string
autofocus 是否默认聚焦 boolean false
native-type 原生 type 属性 string button / submit / reset button

5.单选框

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

表示两个el-radio控件都绑定了data中的radio值,并且这个值可以通过每个el-radio上的label属性指定;当选中某一个el-radio时,它的label值与data中的radio值同步;

Radio Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string / number / boolean
disabled 是否禁用 boolean false
border 是否显示边框 boolean false
size Radio 的尺寸,仅在 border 为真时有效 string medium / small / mini
name 原生 name 属性 string

label属性写法不能混用

注意事项:两种绑定属性的写法不能混用。

  • 使用label="你好棒",这种方式时双引号里面可以是除了数字的其他字符串;
  • 使用:label="4",这种方式双引号里面只能是数字,这样写::label="错误"是错误的;

这里说的只是label属性不能两种写法混用,但是其他标签的其他属性就不一定了。

Radio Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-group Attributes

参数 说明 类型 可选值 默认值
size 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 string medium / small / mini
disabled 是否禁用 boolean false
text-color 按钮形式的 Radio 激活时的文本颜色 string #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string #409EFF

Radio-group Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-button Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string / number
disabled 是否禁用 boolean false
name 原生 name 属性 string

6.多选框

多选框组

image-20200729155752187

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

整个el-checkbox-group绑定checkList,里面的el-checkbox选中了它的label值就会添加到data中的checkList中。

Checkbox Attributes

参数 说明 类型 可选值 默认值
(:)label 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) string / number / boolean
true-label 选中时的值 string / number
false-label 没有选中时的值 string / number
(:)disabled 是否禁用 boolean false
border 是否显示边框 boolean false
size Checkbox 的尺寸,仅在 border 为真时有效 string medium / small / mini
name 原生 name 属性 string
checked 当前是否勾选 boolean false
:indeterminate 设置 indeterminate 状态,只负责样式控制 boolean false

(:)label表示存在两种写法:label:label

Checkbox Events

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值

Checkbox-group Attributes

参数 说明 类型 可选值 默认值
size 多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 string medium / small / mini
(:)disabled 是否禁用 boolean false
:min 可被勾选的 checkbox 的最小数量 number
:max 可被勾选的 checkbox 的最大数量 number
text-color 按钮形式的 Checkbox 激活时的文本颜色 string #ffffff
fill 按钮形式的 Checkbox 激活时的填充色和边框色 string #409EFF

Checkbox-group Events

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值

Checkbox-button Attributes

参数 说明 类型 可选值 默认值
(:)label 选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效) string / number / boolean
true-label 选中时的值 string / number
false-label 没有选中时的值 string / number
(:)disabled 是否禁用 boolean false
name 原生 name 属性 string
checked 当前是否勾选 boolean false

小规律

有没有发现,凡是Attribute的值为数字(number)或者布尔值(boolean)的都可以采用两种写法:

disabled:disabled

7.Input 输入框

Input Attributes

参数 说明 类型 可选值 默认值
type 类型 string text / textarea text
value 绑定值 string / number
maxlength 最大输入长度 number
minlength 最小输入长度 number
placeholder 输入框占位文本 string
clearable 是否可清空 boolean false
:disabled 禁用 boolean false
size 输入框尺寸,只在 type!="textarea" 时有效 string medium / small / mini
prefix-icon 输入框头部图标 string
suffix-icon 输入框尾部图标 string
:rows 输入框高度(不是行数限制),只对 type="textarea" 有效 number 2
(:)autosize 自适应内容高度,只对 type="textarea" 有效,可传入对象,如, boolean / object false
auto-complete 原生属性,自动补全 string on, off off
name 原生属性 string
readonly 原生属性,是否只读 boolean false
max 原生属性,设置最大值
min 原生属性,设置最小值
step 原生属性,设置输入字段的合法数字间隔
resize 控制是否能被用户缩放 string none, both, horizontal, vertical
autofocus 原生属性,自动获取焦点 boolean true, false false
form 原生属性 string
label 输入框关联的label文字 string
tabindex 输入框的tabindex string - -

Input slots

name 说明
prefix 输入框头部内容,只对 type="text" 有效
suffix 输入框尾部内容,只对 type="text" 有效
prepend 输入框前置内容,只对 type="text" 有效
append 输入框后置内容,只对 type="text" 有效

Input Events

事件名称 说明 回调参数
blur 在 Input 失去焦点时触发 (event: Event)
focus 在 Input 获得焦点时触发 (event: Event)
change 在 Input 值改变时触发 (value: string | number)

Input Methods

方法名 说明 参数
focus 使 input 获取焦点 -

Autocomplete Attributes

参数 说明 类型 可选值 默认值
placeholder 输入框占位文本 string
disabled 禁用 boolean false
valueKey 输入建议对象中用于显示的键名 string value
value 必填值,输入绑定值 string
debounce 获取输入建议的去抖延时 number 300
:fetch-suggestions 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 Function(queryString, callback)
popper-class Autocomplete 下拉列表的类名 string
(:)trigger-on-focus 是否在输入框 focus 时显示建议列表 boolean true
name 原生属性 string
select-when-unmatched 在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件 boolean false
label 输入框关联的label文字 string
prefix-icon 输入框头部图标 string
suffix-icon 输入框尾部图标 string

再次小规律

Attribute的值为Number或者Boolean时,可以采用了两种写法disabled:disabled

并且,值为Boolean时,disabled === disableed=“true”,只有当为false时才需要显式声明。

Autocomplete slots

name 说明
prefix 输入框头部内容
suffix 输入框尾部内容
prepend 输入框前置内容
append 输入框后置内容

Autocomplete Events

事件名称 说明 回调参数
select 点击选中建议项时触发 选中建议项

8.InputNumber计数器

Attributes

参数 说明 类型 可选值 默认值
value 绑定值 number
:min 设置计数器允许的最小值 number 0
:max 设置计数器允许的最大值 number Infinity
:step 计数器步长 number 1
size 计数器尺寸 string large, small
disabled 是否禁用计数器 boolean false
controls 是否使用控制按钮 boolean true
debounce 输入时的去抖延迟,毫秒 number 300
controls-position 控制按钮位置 string right -
name 原生属性 string
label 输入框关联的label文字 string

小规律

所以,即使没有特殊标明可以使用:写法的属性,只要它的属性值为Number或者Boolean类型,都可以使用两种属性写法。再不放心,实验一下也是可以的。

Events

事件名称 说明 回调参数
change 绑定值被改变时触发 最后变更的值
blur 在组件 Input 失去焦点时触发 (event: Event)
focus 在组件 Input 获得焦点时触发 (event: Event)

Methods

方法名 说明 参数
focus 使 input 获取焦点 -

9.Select选择器

Select Attributes

参数 说明 类型 可选值 默认值
multiple 是否多选 boolean false
disabled 是否禁用 boolean false
value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填 string value
size 输入框尺寸 string large/small/mini
clearable 单选时是否可以清空选项 boolean false
collapse-tags 多选时是否将选中值按文字的形式展示 boolean false
multiple-limit 多选时用户最多可以选择的项目数,为 0 则不限制 number 0
name select input 的 name 属性 string
placeholder 占位符 string 请选择
filterable 是否可搜索 boolean false
allow-create 是否允许用户创建新条目,需配合 filterable 使用 boolean false
filter-method 自定义搜索方法 function
remote 是否为远程搜索 boolean false
remote-method 远程搜索方法 function
loading 是否正在从远程获取数据 boolean false
loading-text 远程加载时显示的文字 string 加载中
no-match-text 搜索条件无匹配时显示的文字 string 无匹配数据
no-data-text 选项为空时显示的文字 string 无数据
popper-class Select 下拉框的类名 string
reserve-keyword 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 boolean false
default-first-option 在输入框按下回车,选择第一个匹配项。需配合 filterableremote 使用 boolean - false

Select Events

事件名称 说明 回调参数
change 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true,隐藏则为 false
remove-tag 多选模式下移除tag时触发 移除的tag值
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发 (event: Event)
focus 当 input 获得焦点时触发 (event: Event)

Option Group Attributes

参数 说明 类型 可选值 默认值
label 分组的组名 string
disabled 是否将该分组下所有选项置为禁用 boolean false

Option Attributes

参数 说明 类型 可选值 默认值
value 选项的值 string/number/object
label 选项的标签,若不设置则默认与 value 相同 string/number
disabled 是否禁用该选项 boolean false

Methods

方法名 说明 参数
focus 使 input 获取焦点 -

10.Cascader级联选择器

Attributes

参数 说明 类型 可选值 默认值
:options 可选项数据源,键名可通过 props 属性配置 array
:props 配置选项,具体见下表 object
value 选中项绑定值 array
separator 选项分隔符 string 斜杠'/'
popper-class 自定义浮层类名 string
placeholder 输入框占位文本 string 请选择
disabled 是否禁用 boolean false
clearable 是否支持清空选项 boolean false
expand-trigger 次级菜单的展开方式 string click / hover click
:show-all-levels 输入框中是否显示选中值的完整路径 boolean true
filterable 是否可搜索选项 boolean
debounce 搜索关键词输入的去抖延迟,毫秒 number 300
change-on-select 是否允许选择任意一级的选项 boolean false
size 尺寸 string medium / small / mini
before-filter 筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选 function(value)

props

参数 说明 类型 可选值 默认值
value 指定选项的值为选项对象的某个属性值 string
label 指定选项标签为选项对象的某个属性值 string
children 指定选项的子选项为选项对象的某个属性值 string
disabled 指定选项的禁用为选项对象的某个属性值 string

Events

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 当前值
active-item-change 当父级选项变化时触发的事件,仅在 change-on-selectfalse 时可用 各父级选项组成的数组

11.Switch开关

Attributes

参数 说明 类型 可选值 默认值
disabled 是否禁用 boolean false
width switch 的宽度(像素) number 40
active-icon-class switch 打开时所显示图标的类名,设置此项会忽略 active-text string
inactive-icon-class switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text string
active-text switch 打开时的文字描述 string
inactive-text switch 关闭时的文字描述 string
active-value switch 打开时的值 boolean / string / number true
inactive-value switch 关闭时的值 boolean / string / number false
active-color switch 打开时的背景色 string #409EFF
inactive-color switch 关闭时的背景色 string #C0CCDA
name switch 对应的 name 属性 string

Events

事件名称 说明 回调参数
change switch 状态发生变化时的回调函数 新状态的值

Methods

方法名 说明 参数
focus 使 Switch 获取焦点 -

12.Slider滑块

Attributes

参数 说明 类型 可选值 默认值
min 最小值 number 0
max 最大值 number 100
disabled 是否禁用 boolean false
step 步长 number 1
show-input 是否显示输入框,仅在非范围选择时有效 boolean false
show-input-controls 在显示输入框的情况下,是否显示输入框的控制按钮 boolean true
show-stops 是否显示间断点 boolean false
:show-tooltip 是否显示 tooltip boolean true
format-tooltip 格式化 tooltip message function(value)
range 是否为范围选择 boolean false
vertical 是否竖向模式 boolean false
height Slider 高度,竖向模式时必填 string
label 屏幕阅读器标签 string
debounce 输入时的去抖延迟,毫秒,仅在show-input等于true时有效 number 300

小诀窍

属性值凡是Number或者Boolean类型的都可以采用两种写法。之后将不会为这些属性一一注明了。

Events

事件名称 说明 回调参数
change 值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发) 改变后的值

12.TimePicker时间选择器

Attributes

参数 说明 类型 可选值 默认值
readonly 完全只读 boolean false
disabled 禁用 boolean false
editable 文本框可输入 boolean true
clearable 是否显示清除按钮 boolean true
size 输入框尺寸 string medium / small / mini
placeholder 非范围选择时的占位内容 string
start-placeholder 范围选择时开始日期的占位内容 string
end-placeholder 范围选择时开始日期的占位内容 string
is-range 是否为时间范围选择,仅对<el-time-picker>有效 boolean false
arrow-control 是否使用箭头进行时间选择,仅对<el-time-picker>有效 boolean false
value 绑定值 date(TimePicker) / string(TimeSelect)
align 对齐方式 string left / center / right left
popper-class TimePicker 下拉框的类名 string
picker-options 当前时间日期选择器特有的选项参考下表 object {}
range-separator 选择范围时的分隔符 string - '-'
value-format 可选,仅TimePicker时可用,绑定值的格式,同DatePicker string 小时 HH,分 mm,秒 ss,AM/PM A
default-value 可选,选择器打开时默认显示的时间 Date(TimePicker) / string(TimeSelect) 可被new Date()解析(TimePicker) / 可选值(TimeSelect)
name 原生属性 string

Time Select Options

参数 说明 类型 可选值 默认值
start 开始时间 string 09:00
end 结束时间 string 18:00
step 间隔时间 string 00:30
minTime 最小时间,小于该时间的时间段将被禁用 string 00:00
maxTime 最大时间,大于该时间的时间段将被禁用 string

Time Picker Options

参数 说明 类型 可选值 默认值
selectableRange 可选时间段,例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] string / array
format 时间格式化(TimePicker) string 小时:HH,分:mm,秒:ss,AM/PM A 'HH:mm:ss'

Events

事件名 说明 参数
change 用户确认选定的值时触发 组件绑定值
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

Methods

方法名 说明 参数
focus 使 input 获取焦点 -

13.DatePicker 日期选择器

Attributes

参数 说明 类型 可选值 默认值
readonly 完全只读 boolean false
disabled 禁用 boolean false
editable 文本框可输入 boolean true
clearable 是否显示清除按钮 boolean true
size 输入框尺寸 string large, small, mini
placeholder 非范围选择时的占位内容 string
start-placeholder 范围选择时开始日期的占位内容 string
end-placeholder 范围选择时结束日期的占位内容 string
time-arrow-control 是否使用箭头进行时间选择 boolean false
type 显示类型 string year/month/date/week/ datetime/datetimerange/daterange date
format 显示在输入框中的格式 string yyyy,月 MM,日 dd,小时 HH,分 mm,秒 ss,AM/PM A yyyy-MM-dd
align 对齐方式 string left, center, right left
popper-class DateTimePicker 下拉框的类名 string
picker-options 当前时间日期选择器特有的选项参考下表 object {}
range-separator 选择范围时的分隔符 string - '-'
default-value 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
value-format 可选,绑定值的格式。不指定则绑定值为 Date 对象 string yyyy,月 MM,日 dd,小时 HH,分 mm,秒 ss,AM/PM A
name 原生属性 string
unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean false

Picker Options

参数 说明 类型 可选值 默认值
shortcuts 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 Object[]
disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean Function
firstDayOfWeek 周起始日 Number 1 到 7 7

Shortcuts

参数 说明 类型 可选值 默认值
text 标题文本 string
onClick 选中后的回调函数,参数是 vm,可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) function

Events

Event Name Description Parameters
change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format 控制
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

Methods

方法名 说明 参数
focus 使 input 获取焦点

14.Upload上传

Attribute

参数 说明 类型 可选值 默认值
action 必选参数,上传的地址 string
headers 设置上传的请求头部 object
multiple 是否支持多选文件 boolean
data 上传时附带的额外参数 object
name 上传的文件字段名 string file
with-credentials 支持发送 cookie 凭证信息 boolean false
show-file-list 是否显示已上传文件列表 boolean true
drag 是否启用拖拽上传 boolean false
accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效) string
on-preview 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据 function(file)
on-remove 文件列表移除文件时的钩子 function(file, fileList)
on-success 文件上传成功时的钩子 function(response, file, fileList)
on-error 文件上传失败时的钩子 function(err, file, fileList)
on-progress 文件上传时的钩子 function(event, file, fileList)
on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList)
before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 function(file)
before-remove 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。 function(file, fileList)
list-type 文件列表的类型 string text/picture/picture-card text
auto-upload 是否在选取文件后立即进行上传 boolean true
file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array []
http-request 覆盖默认的上传行为,可以自定义上传的实现 function
disabled 是否禁用 boolean false
limit 最大允许上传个数 number
on-exceed 文件超出个数限制时的钩子 function(files, fileList) -

Methods

方法名 说明 参数
clearFiles 清空已上传的文件列表(该方法不支持在 before-upload 中调用)
abort 取消上传请求 ( file: fileList 中的 file 对象 )

15.Rate评分

Attributes

参数 说明 类型 可选值 默认值
max 最大分值 number 5
disabled 是否为只读 boolean false
allow-half 是否允许半选 boolean false
low-threshold 低分和中等分数的界限值,值本身被划分在低分中 number 2
high-threshold 高分和中等分数的界限值,值本身被划分在高分中 number 4
colors icon 的颜色数组,共有 3 个元素,为 3 个分段所对应的颜色 array ['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color 未选中 icon 的颜色 string #C6D1DE
disabled-void-color 只读时未选中 icon 的颜色 string #EFF2F7
icon-classes icon 的类名数组,共有 3 个元素,为 3 个分段所对应的类名 array ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class 未选中 icon 的类名 string el-icon-star-off
disabled-void-icon-class 只读时未选中 icon 的类名 string el-icon-star-on
show-text 是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容 boolean false
show-score 是否显示当前分数,show-score 和 show-text 不能同时为真 boolean false
text-color 辅助文字的颜色 string #1F2D3D
texts 辅助文字数组 array ['极差', '失望', '一般', '满意', '惊喜']
score-template 分数显示模板 string

Events

事件名称 说明 回调参数
change 分值改变时触发 改变后的分值

16.ColorPicker 颜色选择器

Attributes

参数 说明 类型 可选值 默认值
disabled 是否禁用 boolean false
size 尺寸 string medium / small / mini
show-alpha 是否支持透明度选择 boolean false
color-format 写入 v-model 的颜色的格式 string hsl / hsv / hex / rgb hex(show-alpha 为 false)/ rgb(show-alpha 为 true)
popper-class ColorPicker 下拉框的类名 string

Events

事件名称 说明 回调参数
change 当绑定值变化时触发 当前值
active-change 面板中当前显示的颜色发生改变时触发 当前显示的颜色值

17.transfer穿梭框

有点难啊。

Attributes

参数 说明 类型 可选值 默认值
data Transfer 的数据源 array[{ key, label, disabled }] [ ]
filterable 是否可搜索 boolean false
filter-placeholder 搜索框占位符 string 请输入搜索内容
filter-method 自定义搜索方法 function
titles 自定义列表标题 array ['列表 1', '列表 2']
button-texts 自定义按钮文案 array [ ]
render-content 自定义数据项渲染函数 function(h, option)
format 列表顶部勾选状态文案 object { noChecked: '\({checked}/\){total}', hasChecked: '\({checked}/\){total}' }
props 数据源的字段别名 object
left-default-checked 初始状态下左侧列表的已勾选项的 key 数组 array [ ]
right-default-checked 初始状态下右侧列表的已勾选项的 key 数组 array [ ]

Slot

name 说明
left-footer 左侧列表底部的内容
right-footer 右侧列表底部的内容

Events

事件名称 说明 回调参数
change 右侧列表元素变化时触发 当前值、数据移动的方向('left' / 'right')、发生移动的数据 key 数组

18.Form表单

Form Attributes

参数 说明 类型 可选值 默认值
model 表单数据对象 object
rules 表单验证规则 object
inline 行内表单模式 boolean false
label-position 表单域标签的位置 string right/left/top right
label-width 表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 string
label-suffix 表单域标签的后缀 string
show-message 是否显示校验错误信息 boolean true
inline-message 是否以行内形式展示校验信息 boolean false
status-icon 是否在输入框中显示校验结果反馈图标 boolean false
size 用于控制该表单内组件的尺寸 string medium / small / mini -

Form Methods

方法名 说明 参数
validate 对整个表单进行校验的方法。若不传入回调函数,则会返回一个 promise Function(callback: Function(boolean))
validateField 对部分表单字段进行校验的方法 Function(prop: string, callback: Function(errorMessage: string))
resetFields 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 -
clearValidate 移除整个表单的校验结果 -

Form-Item Attributes

参数 说明 类型 可选值 默认值
prop 表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的 string 传入 Form 组件的 model 中的字段
label 标签文本 string
label-width 表单域标签的的宽度,例如 '50px' string
required 是否必填,如不设置,则会根据校验规则自动生成 bolean false
rules 表单验证规则 object
error 表单域验证错误信息, 设置该值会使表单验证状态变为error,并显示该错误信息 string
show-message 是否显示校验错误信息 boolean true
inline-message 以行内形式展示校验信息 boolean false
size 用于控制该表单域下组件的尺寸 string medium / small / mini -

Form-Item Slot

name 说明
Form Item 的内容
label 标签文本的内容

Form-Item Methods

方法名 说明 参数
resetField 对该表单项进行重置,将其值重置为初始值并移除校验结果 -

19.Table 表格

Table Attributes

参数 说明 类型 可选值 默认值
data 显示的数据 array
height Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则 Table 的高度受控于外部样式。 string/number
max-height Table 的最大高度 string/number
stripe 是否为斑马纹 table boolean false
border 是否带有纵向边框 boolean false
size Table 的尺寸 string medium / small / mini
fit 列的宽度是否自撑开 boolean true
show-header 是否显示表头 boolean true
highlight-current-row 是否要高亮当前行 boolean false
current-row-key 当前行的 key,只写属性 String,Number
row-class-name 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String
row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 Function({row, rowIndex})/Object
cell-class-name 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String
cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object
header-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。 Function({row, rowIndex})/String
header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 Function({row, rowIndex})/Object
header-cell-class-name 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String
header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, rowIndex, rowIndex, columnIndex})/Object
row-key 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function Function(row)/String
empty-text 空数据时显示的文本内容,也可以通过 slot="empty" 设置 String 暂无数据
default-expand-all 是否默认展开所有行,当 Table 中存在 type="expand" 的 Column 的时候有效 Boolean false
expand-row-keys 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。 Array
default-sort 默认的排序列的prop和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序 Object order: ascending, descending 如果只指定了prop, 没有指定order, 则默认顺序是ascending
tooltip-effect tooltip effect 属性 String dark/light
show-summary 是否在表尾显示合计行 Boolean false
sum-text 合计行第一列的文本 String 合计
summary-method 自定义的合计计算方法 Function({ columns, data })
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex })

Table Events

事件名 说明 参数
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
row-click 当某一行被点击时会触发该事件 row, event, column
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, event
row-dblclick 当某一行被双击时会触发该事件 row, event
header-click 当某一列的表头被点击时会触发该事件 column, event
sort-change 当表格的排序条件发生变化的时候会触发该事件
filter-change 当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。 filters
current-change 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event
expand-change 当用户对某一行展开或者关闭的时候会触发该事件 row, expandedRows

Table Methods

方法名 说明 参数
clearSelection 用于多选表格,清空用户的选择,当使用 reserve-selection 功能的时候,可能会需要使用此方法 selection
toggleRowSelection 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) row, selected
toggleRowExpansion 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) row, expanded
setCurrentRow 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 row
clearSort 用于清空排序条件,数据会恢复成未排序的状态
clearFilter 用于清空过滤条件,数据会恢复成未过滤的状态
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法

Table Slot

name 说明
append 插入至表格最后一行之后的内容,如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。若表格有合计行,该 slot 会位于合计行之上。

Table-column Attributes

参数 说明 类型 可选值 默认值
type 对应列的类型。如果设置了 selection 则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 string selection/index/expand
index 如果设置了 type=index,可以通过传递 index 属性来自定义索引 string, Function(index) - -
column-key column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 string
label 显示的标题 string
prop 对应列内容的字段名,也可以使用 property 属性 string
width 对应列的宽度 string
min-width 对应列的最小宽度,与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 string
fixed 列是否固定在左侧或者右侧,true 表示固定在左侧 string, boolean true, left, right
render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index })
sortable 对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件 boolean, string true, false, 'custom' false
sort-method 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致 Function(a, b)
sort-by 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推。 String/Array/Function(row, index)
resizable 对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真) boolean true
formatter 用来格式化内容 Function(row, column, cellValue)
show-overflow-tooltip 当内容过长被隐藏时显示 tooltip Boolean false
align 对齐方式 String left/center/right left
header-align 表头对齐方式,若不设置该项,则使用表格的对齐方式 String left/center/right
class-name 列的 className string
label-class-name 当前列标题的自定义类名 string
selectable 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index)
reserve-selection 仅对 type=selection 的列有效,类型为 Boolean,为 true 则代表会保留之前数据的选项,需要配合 Table 的 clearSelection 方法使用。 Boolean false
filters 数据过滤的选项,数组格式,数组中的元素需要有 text 和 value 属性。 Array[{ text, value }]
filter-placement 过滤弹出框的定位 String 与 Tooltip 的 placement 属性相同
filter-multiple 数据过滤的选项是否多选 Boolean true
filter-method 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 Function(value, row)
filtered-value 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 Array

20.Tag 标签

Attributes

参数 说明 类型 可选值 默认值
type 主题 string success/info/warning/danger
closable 是否可关闭 boolean false
disable-transitions 是否禁用渐变动画 boolean false
hit 是否有边框描边 boolean false
color 背景色 string
size 尺寸 string medium / small / mini

Events

事件名称 说明 回调参数
close 关闭 Tag 时触发的事件

21.Progress进度条

Attributes

参数 说明 类型 可选值 默认值
percentage 百分比(必填) number 0-100 0
type 进度条类型 string line/circle line
stroke-width 进度条的宽度,单位 px number 6
text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用) Boolean false
status 进度条当前状态 string success/exception
width 环形进度条画布宽度(只在 type=circle 时可用) number 126
show-text 是否显示进度条文字内容 boolean true

22.Tree树形控件

Attributes

参数 说明 类型 可选值 默认值
data 展示数据 array
empty-text 内容为空的时候展示的文本 String
node-key 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 String
props 配置选项,具体看下表 object
render-after-expand 是否在第一次展开某个树节点后才渲染其子节点 boolean true
load 加载子树数据的方法 function(node, resolve)
render-content 树节点的内容区的渲染 Function Function(h,
highlight-current 是否高亮当前选中节点,默认值是 false。 boolean false
default-expand-all 是否默认展开所有节点 boolean false
expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 boolean true
auto-expand-parent 展开子节点的时候是否自动展开父节点 boolean true
default-expanded-keys 默认展开的节点的 key 的数组 array
show-checkbox 节点是否可被选择 boolean false
check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false boolean false
default-checked-keys 默认勾选的节点的 key 的数组 array
filter-node-method 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 Function(value, data, node)
accordion 是否每次只打开一个同级树节点展开 boolean false
indent 相邻级节点间的水平缩进,单位为像素 number 16

props

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string, function(data, node)
children 指定子树为节点对象的某个属性值 string, function(data, node)
disabled 指定节点选择框是否禁用为节点对象的某个属性值 boolean, function(data, node)
isLeaf 指定节点是否为叶子节点 boolean, function(data, node)

方法

Tree 拥有如下方法,返回目前被选中的节点数组:

方法名 说明 参数
filter 对树节点进行筛选操作 接收一个任意类型的参数,该参数会在 filter-node-method 中作为第一个参数
updateKeyChildren 通过 keys 设置节点子元素,使用此方法必须设置 node-key 属性 (key, data) 接收两个参数,1. 节点 key 2. 节点数据的数组
getCheckedNodes 若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点所组成的数组 (leafOnly) 接收一个 boolean 类型的参数,若为 true 则仅返回被选中的叶子节点,默认值为 false
setCheckedNodes 设置目前勾选的节点,使用此方法必须设置 node-key 属性 (nodes) 接收勾选节点数据的数组
getCheckedKeys 若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点所组成的数组 (leafOnly) 接收一个 boolean 类型的参数,若为 true 则仅返回被选中的叶子节点的 keys,默认值为 false
setCheckedKeys 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false
setChecked 通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性 (key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false
getCurrentKey 获取当前被选中节点的 key,使用此方法必须设置 node-key 属性,若没有节点被选中则返回 null
getCurrentNode 获取当前被选中节点的 node,若没有节点被选中则返回 null
setCurrentKey 通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性 (key) 待被选节点的 key
setCurrentNode 通过 node 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性 (node) 待被选节点的 node

Events

事件名称 说明 回调参数
node-click 节点被点击时的回调 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change 节点选中状态发生变化时的回调 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
current-change 当前选中节点变化时触发的事件 共两个参数,依次为:当前节点的数据,当前节点的 Node 对象
node-expand 节点被展开时触发的事件 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-collapse 节点被关闭时触发的事件 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

23.Pagination分页

Attributes

参数 说明 类型 可选值 默认值
small 是否使用小型分页样式 Boolean false
background 是否为分页按钮添加背景色 Boolean false
page-size 每页显示条目个数 Number 10
total 总条目数 Number
page-count 总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性 Number
current-page 当前页数,支持 .sync 修饰符 Number 1
layout 组件布局,子组件名用逗号分隔 String sizes, prev, pager, next, jumper, ->, total, slot 'prev, pager, next, jumper, ->, total'
page-sizes 每页显示个数选择器的选项设置 Number[] [10, 20, 30, 40, 50, 100]
popper-class 每页显示个数选择器的下拉框类名 string
prev-text 替代图标显示的上一页文字 string
next-text 替代图标显示的下一页文字 string

Events

事件名称 说明 回调参数
size-change pageSize 改变时会触发 每页条数size
current-change currentPage 改变时会触发 当前页currentPage

Slot

name 说明
自定义内容,需要在 layout 中列出 slot

24.Badge 标记

Attributes

参数 说明 类型 可选值 默认值
value 显示值 string, number
max 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 number
is-dot 小圆点 boolean false
hidden 隐藏 badge boolean false

25.Alert 警告

Attributes

参数 说明 类型 可选值 默认值
title 标题,必选参数 string
type 主题 string success/warning/info/error info
description 辅助性文字。也可通过默认 slot 传入 string
closable 是否可关闭 boolean true
center 文字是否居中 boolean true
close-text 关闭按钮自定义文本 string
show-icon 是否显示图标 boolean false

Events

事件名称 说明 回调参数
close 关闭alert时触发的事件

26.Loading加载

Options

参数 说明 类型 可选值 默认值
target Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 object/string document.body
body v-loading 指令中的 body 修饰符 boolean false
fullscreen v-loading 指令中的 fullscreen 修饰符 boolean true
lock v-loading 指令中的 lock 修饰符 boolean false
text 显示在加载图标下方的加载文案 string
spinner 自定义加载图标类名 string
background 遮罩背景色 string
customClass Loading 的自定义类名 string

27.Message消息提示

Options

参数 说明 类型 可选值 默认值
message 消息文字 string / VNode
type 主题 string success/warning/info/error info
iconClass 自定义图标的类名,会覆盖 type string
dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean false
customClass 自定义类名 string
duration 显示时间, 毫秒。设为 0 则不会自动关闭 number 3000
showClose 是否显示关闭按钮 boolean false
center 文字是否居中 boolean false
onClose 关闭时的回调函数, 参数为被关闭的 message 实例 function

方法

调用 Messagethis.$message 会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close 方法。

方法名 说明
close 关闭当前的 Message

28.MessageBox弹框

Options

参数 说明 类型 可选值 默认值
title MessageBox 标题 string
message MessageBox 消息正文内容 string / VNode
dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean false
type 消息类型,用于显示图标 string success / info / warning / error
customClass MessageBox 的自定义类名 string
callback 若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调 function(action, instance),action 的值为'confirm'或'cancel', instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法
showClose MessageBox 是否显示右上角关闭按钮 boolean true
beforeClose MessageBox 关闭前的回调,会暂停实例的关闭 function(action, instance, done),action 的值为'confirm'或'cancel';instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法;done 用于关闭 MessageBox 实例
lockScroll 是否在 MessageBox 出现时将 body 滚动锁定 boolean true
showCancelButton 是否显示取消按钮 boolean false(以 confirm 和 prompt 方式调用时为 true)
showConfirmButton 是否显示确定按钮 boolean true
cancelButtonText 取消按钮的文本内容 string 取消
confirmButtonText 确定按钮的文本内容 string 确定
cancelButtonClass 取消按钮的自定义类名 string
confirmButtonClass 确定按钮的自定义类名 string
closeOnClickModal 是否可通过点击遮罩关闭 MessageBox boolean true(以 alert 方式调用时为 false)
closeOnPressEscape 是否可通过按下 ESC 键关闭 MessageBox boolean true(以 alert 方式调用时为 false)
closeOnHashChange 是否在 hashchange 时关闭 MessageBox boolean true
showInput 是否显示输入框 boolean false(以 prompt 方式调用时为 true)
inputPlaceholder 输入框的占位符 string
inputType 输入框的类型 string text
inputValue 输入框的初始文本 string
inputPattern 输入框的校验表达式 regexp
inputValidator 输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage function
inputErrorMessage 校验未通过时的提示文本 string 输入的数据不合法!
center 是否居中布局 boolean false
roundButton 是否使用圆角按钮 boolean false

29.Notification通知

Options

参数 说明 类型 可选值 默认值
title 标题 string
message 说明文字 string/Vue.VNode
dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean false
type 主题样式,如果不在可选值内将被忽略 string success/warning/info/error
iconClass 自定义图标的类名。若设置了 type,则 iconClass 会被覆盖 string
customClass 自定义类名 string
duration 显示时间, 毫秒。设为 0 则不会自动关闭 number 4500
position 自定义弹出位置 string top-right/top-left/bottom-right/bottom-left top-right
showClose 是否显示关闭按钮 boolean true
onClose 关闭时的回调函数 function
onClick 点击 Notification 时的回调函数 function
offset 偏移的距离,在同一时刻,所有的 Notification 实例应当具有一个相同的偏移量 number 0

方法

调用 Notificationthis.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 close 方法。

方法名 说明
close 关闭当前的 Notification
posted @ 2020-08-18 00:19  AhuntSun  阅读(2157)  评论(0编辑  收藏  举报