mo-ui
基于Vue2.x的PC组件库。在线示例
API
mo-button
属性 Attributes
参数
说明
类型
可选值
默认值
type
类型
string
primary 主按钮 secondary 次按钮 info 次按钮-灰 常用按钮 danger 高危按钮 text 文字按钮
info
disabled
是否禁用
boolean
—
false
is-loading
是否在加载中
boolean
—
false
icon
图标类名
string
—
—
suffix-icon
尾部图标
string
—
—
size
按钮大小
string
S / M / L
M
事件 Events
mo-slider 滑动条
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
绑定值
number
—
—
name
滑动条name
string
min
最小值
number
—
0
max
最大值
number
—
100
disabled
是否禁用
boolean
—
false
step
步长
number
—
1
size
输入框大小
string
S / M / L
M
precision
精度,小于步长精度时取步长精度
Number
show-range
是否显示范围提示文字
boolean
false
show-input
是否显示输入框
boolean
—
false
show-input-controls
输入框是否显示加减
boolean
false
show-tooltip
是否显示 tooltip
boolean
—
true
format
tooltip显示格式化, function(value){return value}
Function
—
—
事件 Events
事件名
说明
参数
change
值改变时执行
改变后的值
mo-input 输入框
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
绑定值,type=number时,值类型为number, 其他情况类型为string
string / number
—
—
type
类型
string
text/textarea,其他input type的类型
—
name
原生属性
—
—
maxlength
最大输入长度
number
—
—
disabled
是否禁用
boolean
—
false
width
输入框长度,支持数字和字符串,如 70 或 70px 或 70%
string / number
placeholder
输入框占位文字
string
—
—
is-search
是否支持搜索
boolean
—
false
is-clear
是否支持清空
boolean
—
false
show-password
是否显示切换密码图标
boolean
—
false
show-word-limit
是否显示输入字数统计
boolean
—
false
readonly
原生属性,是否只读
boolean
—
false
autofocus
是否自动聚焦
boolean
—
false
size
输入框大小,textarea时无效
string
S / M / L
M
icon
输入框头部图标
string
—
—
suffix-icon
输入框尾部图标
string
—
—
rows
textarea时生效
number
—
2
allow
输入框允许输入字符的正则表达式
RegExp
—
—
valid
数据验证
Array / Object
unit
输入框单位
String
—
—
auto-correction
自动纠错,仅支持按范围进行数字纠错
Array
—
[]
事件 Events
事件名
说明
参数
change
值改变时执行(失焦时),先执行失焦事件,再执行此事件
改变后的值
input
输入框值改变时触发
输入框的值
blur
输入框失焦时触发
event
focus
输入框聚焦时触发
event
clear
点击清空时触发
—
search
点击搜索时触发
输入框的值
方法 Methods
方法名
说明
参数
focus
输入框聚焦
setInputValue
设置输入框的值
设置输入框的值
select
输入框内容选中
mo-input-group
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
绑定值
string
—
—
type
输入框组类型
string
ip / mac
—
name
原生属性
string
—
—
disabled
是否禁用
boolean
—
false
width
输入框长度,支持数字和字符串,如 70 或 70px 或 70%
string / number
—
—
size
输入框大小
string
S / M / L
M
input-nums
输入框个数(自定义类型时需要定义输入框组个数)
number
—
—
splitter
输入框的分隔符
string
—
—
maxlength
每个输入框最大输入长度
number
—
—
allow
输入框允许输入的字符的正则表达式
RegExp
—
—
auto-correction
自动纠错,仅支持按范围进行数字纠错
Array
—
[]
事件 Events
事件名
说明
参数
change
值改变时执行
改变后的值
input
输入框值改变时触发
输入框的值
focus
输入框聚焦时触发
—
blur
输入框失焦时触发
—
mo-input-number
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
绑定值
number
—
—
name
原生属性
string
—
—
disabled
是否禁用
boolean
—
false
width
输入框长度,支持数字和字符串,如 70 或 70px 或 70%
string / number
—
—
min
输入框最小值
number
—
-Infinity
max
输入框最大值
number
—
Infinity
is-controls
输入框右侧是否有控制器
boolean
—
true
controls-position
控制器按钮位置
string
right
—
size
输入框尺寸
string
S / M / L
M
step
步长
number
—
1
precision
数值精度,小于步长精度时计算会用步长的精度
number
—
—
事件 Events
事件名
说明
参数
change
值改变时执行
改变后的值
mo-select 选择器
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
绑定值,多选时值为数组,单选时为字符串
string / Array / Number / Boolean
—
—
name
select input 的 name 属性
string
—
—
disabled
是否禁用
boolean
—
false
width
选择器宽度
string / Number
—
—
is-clear
是否可以清空选项
boolean
—
false
is-multiple
是否可以多选,支持多选时不能配置自定义
boolean
—
false
multiple-limit
多选时用户最多可以选择的个数,为 0 则不限制
number
—
0
placeholder
占位符
string
—
请选择
size
输入框尺寸
string
S / M / L
M
options
下拉选项数组对象,支持数据选项为对象和字符串
Array / Array
—
[]
is-manual
是否支持手动输入
boolean
—
false
manual-text
手动输入时选项的文字
string
—
自定义
position
选项框位置,对应上 、下、 自适应
string
top / bottom / auto
auto
display-options-number
设置可显示选项的数量,如options.length大于该值,则显示滚动条
number
-
5
当支持手动输入时,支持输入框组件的属性
options
选择器选项配置,支持Object
,Boolean
,Number
,String
参数
说明
类型
可选值
默认值
label
选项文字
string
—
—
value
选项的值
string / number / boolean
—
—
disabled
是否禁用此项
boolean
—
false
事件 Events
事件名
说明
参数
change
值改变时执行(失焦或者选择选项后)
改变后的值
input
输入框值改变时触发
输入框的值
blur
输入框失焦时触发,不支持手动输入时不执行
event
focus
输入框聚焦时触发,不支持手动输入时不执行
event
clear
点击清空时触发
—
visible-change
下拉框出现/隐藏时触发
出现则为 true,隐藏则为 false
mo-timepicker 时间选择器
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string
—
—
name
时间框名称
string
—
—
disabled
是否禁用
boolean
—
false
width
时间选择器宽度
string / Number
—
—
panelWidth
面板框宽度
string / Number
—
—
is-clear
是否支持清除
boolean
—
true
is-range
是否支持范围选择
boolean
—
false
placeholder
占位内容,支持范围选择时为开始时间的占位符 不支持范围时为时间选择框的占位符
string
—
—
end-placeholder
支持范围选择时结束时间的占位符
string
format
时间格式,支持hh、mm、ss与任意字符组合,小时hh为必填项
string
—
hh:mm
min
最小时间
string
—
—
max
最大时间
string
—
—
minute-interval
分钟间隔
number
—
1
second-interval
秒间隔
number
—
1
size
输入框尺寸
string
S/ M / L
M
事件 Events
事件名
说明
参数
change
值改变时执行
改变后的值
mo-datepicker 日期选择器
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string
—
—
type
日期时间类型,date日期 datetime时间日期
string
date / datetime
date
name
时间框名称
string
—
—
disabled
是否禁用
boolean
—
false
width
日期选择器宽度
string / Number
—
—
is-clear
是否支持清除
boolean
—
true
is-range
是否支持范围选择
boolean
—
false
placeholder
占位内容,支持范围选择时为开始日期的占位符 不支持范围时为日期选择框的占位符
string
—
—
end-placeholder
支持范围选择时结束时间的占位符
string
format
日期格式,YYYY-MM-DD hh:mm:ss 日期格式YYYY-MM-DD可任意调整年月日的位置 YYYY表示年 MM表示月 DD表示天 分隔符可自定义 时分秒格式见mo-timepicker
string
—
YYYY-MM-DD
min
最小日期,必须与日期格式对应
string
—
2000-01-01
max
最大日期,必须与日期格式对应
string
—
2037-12-31
minute-interval
分钟间隔
number
—
1
second-interval
秒间隔
number
—
1
size
输入框尺寸
string
S / M / L
M
事件 Events
事件名
说明
参数
change
值改变时执行
改变后的值
mo-radio 单选框
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string
—
—
name
radio的名称
string
—
—
options
下拉选项数组对象
Array
—
[]
disabled
是否禁用
boolean
false
before-change
切换选中前的钩子,返回false时,不会修改选中项
function(value) {}
—
function() {return true}
options属性
参数
说明
类型
可选值
默认值
label
选项文字
string
value
选项值
string / boolean / number
disabled
选项是否禁用
boolean
false
事件 Events
事件名
说明
参数
change
值改变时触发
改变后的值
click
点击选项时触发
选项value
mo-checkbox 复选框
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string / number / boolean
—
—
name
checkbox的名称
string
—
—
disabled
是否禁用
boolean
—
false
on-value
选中时的值
string / number / boolean
—
true
off-value
未选中时的值
string / number / boolean
—
false
before-change
切换之前执行的函数,返回false时,不会执行数据更新
function(value) {}
—
function() {return true}
事件 Events
事件名
说明
参数
change
值改变时触发
改变后的值
click
点击选项时触发
当前值
mo-checkbox-group 多选框组
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
Arrray
—
[]
name
checkbox的名称
string
—
disabled
是否禁用
boolean
—
false
options
选项数组对象[{label: 显示文字, value:值,disabled: 是否禁用此项}]
Array
—
[]
is-select-all
是否支持全选
boolean
—
false
select-text
全部选中的文字描述
string
—
全选
min
最小支持选项
number
—
0
max
最大支持选项,最大为选项的个数
number
—
—
options
参数
说明
类型
可选值
默认值
label
选项框描述文字
string
value
选项框值,各选项的值不能一样
string / number / boolean
disabled
该选项是否禁用
boolean
false
事件 Events
事件名
说明
参数
change
值改变时触发
改变后的值
click
点击选项时触发
选项value
mo-switch 开关
属性 Attributes
参数
说明
类型
可选值
默认值
value / v-model
绑定值
string / number / boolean
—
—
name
开关的名称
string
—
—
disabled
是否禁用
boolean
—
false
on-value
选中时的值
string / number / boolean
—
true
off-value
未选中时的值
string / number / boolean
—
false
on-text
选中时的文字
string
—
—
off-text
未选中时的文字
string
—
—
before-change
开关值切换前的钩子,返回false时,不会改变开关状态
function(value) {}
—
function() {return true}
size
开关大小
string
S / M / L
M
事件 Events
事件名
说明
参数
change
值改变时触发
改变后的值
mo-upload 上传
属性 Attributes
参数
说明
类型
可选值
默认值
name
上传的文件字段名
string
—
file
action
必选参数,上传的地址
string
—
—
accept
接受上传的文件类型,例如 .bin
string
disabled
是否禁用
boolean
—
false
data
上传时附带的额外参数
object
—
—
type
文件列表的类型,文本 图片
string
text/picture
text
show-file-list
是否显示已上传文件列表
boolean
—
false
on-success
文件上传成功时的钩子
function(response)
—
—
on-change
文件改变时的钩子,添加文件或修改文件
function(file)
—
—
before-upload
上传文件之前的钩子,参数为上传的文件, 若返回 false 则不上传
function(file)
—
—
事件 Events
事件名
说明
参数
submit
手动上传文件列表
—
mo-table 表格
属性 Attributes
参数
说明
类型
可选值
默认值
data
表格数据
Array
—
[]
show-header
是否显示表头
boolean
—
true
row-key
表格行的key(选填项)
string
—
max-row
表格最多显示多少行,超过时右侧显示滚动条
number
—
10
stripe
是否显示斑马纹表格
boolean
—
false
border
表格td是否有边框
boolean
false
placeholder
搜索框占位符,为空时会取支持搜索列的表头文字以 / 连接
string
—
is-loading
是否在加载中
boolean
—
false
loading-text
loading的文字
string
—
empty-text
表格为空时的文字
string
—
无数据
is-pagination
是否支持分页
boolean
—
false
page-size
每页多少条
number
—
10
is-change-size
是否支持修改每页条数
boolean
—
false
page-size-options
每页显示个数选择器的选项设置
number[]
—
[10, 20, 30, 40, 50, 100]
is-input-page
是否支持手动输入页面
boolean
—
false
show-page-border
是否显示分页按钮的框
boolean
false
select-data
选中的行数据
Array
[]
before-select-all
全选时切换前执行的事件,返回false时不会执行全选事件
function
function(val) {return true}
Slot
name
说明
header
表格body第一行显示的内容,从tr开始自定义元素
loading
自定义加载中,显示的前提是is-loading 必须为true
empty
自定义数据列表为空显示
方法 Methods
方法名
说明
参数
getSelected
获取选中的项,返回值为选中的项
-
getCurrentPageData
获取表格当前页的数据
事件 Events
事件名
说明
参数
after-update
更新后的表格数据
表格数据(转化后的数据)
click-row
当某一行被点击时会触发该事件
rowData, index
selection-change
点击全选 或者单选时执行的事件,仅在type=selection时生效
当前的选中项
mo-table-col 属性 Attributes
参数
说明
类型
可选值
默认值
type
对应列的类型,selection为支持多选择,index为显示行索引,expand为支持展开
string
selection / index / expand
—
label
表头列文字
string
—
—
prop
表头列属性,定义type的三种类型时可不填,其他情况必填
string
—
—
width
列宽度,百分比或者xxpx
string / number
—
—
is-tooltip
鼠标放上去是否显示tooltip
boolean
—
false
is-search
是否支持搜索
boolean
—
false
is-sort
是否支持排序
boolean
—
false
align
对齐方式
string
left / center / right
left
format
对此列数据自定义格式化,返回值为该列显示的数据, 返回数据可用于搜索 function(prop, rowData, index)
Function
—
—
get-disabled
仅对type=selection 有效,返回复选框是否禁用 function(rowData)
Function
before-selected
仅对type=selection 有效,点击checkbox时,返回false表示不会被选中,其他都会选中。 function(rowData, index)
Function
mo-table-col slot
name
说明
default
自定义列显示信息,内容必须用template标签包含,使用v-slot
expand
展开后的自定义内容,使用方法与default一致
示例
<mo-table-col width =" 200" field =" selected" >
<template v-slot =" slotScope" >
<label class =" pointer" >
<span class =" icon-vpn-online" :class =" {' text-success' : slotScope .status === ' 1' }" ></span >
</label >
</template >
//usage1
<template #expand =" slotScope" >
xxxx
</template >
//usage2
<template v-slot :expand =" slotScope" >
xxxx
</template >
</mo-table-col >
mo-pagination 分页
属性 Attributes
参数
说明
类型
可选值
默认值
border
页码是否有边框
boolean
—
true
page-size
每页多少条
number
—
10
total
总条目数
number
—
—
pager-count
页面按钮的数量,超过时会折叠
number
大于等于 5 且小于等于 13 的奇数
9
current-page
当前页
number
—
—
is-show-total
是否显示总条目数
boolean
false
is-show-total-page
是否显示总页目数
boolean
false
is-change-size
是否支持修改每页条数
boolean
—
false
page-size-options
每页显示个数选择器的选项设置
number[]
—
[10, 20, 30, 40, 50, 100]
is-input-page
是否支持手动输入页面
boolean
—
false
disabled
是否禁用
boolean
—
false
prev-text
替代图标显示的上一页文字
string
—
—
next-text
替代图标显示的下一页文字
string
—
—
事件 Events
事件名
说明
参数
change-size
每页条数改变后触发
每页条数
change-page
当前页改变时会触发
当前页
click-prev
用户点击上一页按钮改变当前页后触发
当前页
click-next
用户点击下一页按钮改变当前页后触发
当前页
mo-form 表单
属性 Attributes
参数
说明
类型
可选值
默认值
rules
数据验证规则
boolean
{}
model
表单数据对象
Object
—
{}
is-label-right
文字方向是否右对齐
boolean
false
beforeSubmit
表单提交前数据验证,返回false时不会执行submit function(data) {}
function
disabled
表单是否禁用
Boolean
false
rules 验证规则
key为 表单选项的prop,
值为验证规则,多条验证规则时,为数组
验证规则
参数
说明
类型
可选值
默认值
type
数据验证类型
string
args
数据验证需要用到的值
Array
msg
错误提示信息,如果定义了,当验证错误时会提示此信息
string
验证类型
vue 原型链绑定$valid
支持函数和对象形式
示例
const valid = {
num: function(str, min, max) {
if (!/^([-0-9])?([0-9]+)$/.test(str)) {
return "输入值必须为整数";
}
if (typeof min === "number" && typeof max === "number") {
if (parseInt(str, 10) < min || parseInt(str, 10) > max) {
return `有效输入范围:${min} - ${max}`;
}
}
},
ip: {
all: function(str) {
let ret = this.specific(str);
if (ret) {
return ret;
}
},
specific: function(str) {
let ipArr = str.split("."),
ipHead = ipArr[0];
if (Number(ipArr[0]) > 223) {
return ipHead + " 为无效值,请输入一个1-223之间的值";
}
}
}
};
vue.prototype.$valid = valid;
支持自定义验证
配置输入框选项对应rules规则为函数时,可支持自定义数据验证规则
export default {
data() {
return {
dnsValid: [{type: "dns"}, this.checkDns]
};
},
methods: {
checkDns(val) {
//自定义规则,返回值false表示验证通过,返回字符串表示对应的错误信息
}
}
}
方法 Methods
方法名
说明
参数
submitForm
提交表单事件
getSubmitData
获取表单提交数据
事件 Events
事件名
说明
参数
submit
表单验证完后的提交数据事件
提交的表单数据
mo-form-item 表单元素
属性 Attributes
参数
说明
类型
可选值
默认值
label
选项文字
string
is-no-label
不显示文字
boolean
false
prop
选项属性,用于数据验证规则和提交数据,不填不会对数据进行验证和提交
string
relativeProp
关联元素,prop数据验证时,同时也会执行relativeProp 的数据验证
String / Array
required
是否必填
boolean
true
ignore
是否忽略验证
boolean
false
valid
数据验证规格,与rules配置一致,支持type, args,msg配置
Array / Object
disabled
选项是否禁用
boolean
false
isInline
是否不换行显示,适用于紧接着前面的组件显示在一行
boolean
false
方法 Methods
方法名
说明
参数
checkValid
数据验证,返回是否验证成功 function(data)
选项的值
mo-form-item slot
name
说明
default
表单元素右边显示内容
content
右边多个数据验证时需要把第二个放入此插槽内,显示在default插槽后面
label
表单元素左边文字内容
list
List Attributes - 列表属性
参数
说明
类型
可选值
默认值
bordered
是否展示外边框
boolean
-
false
options
配置项,详情见下表
Array<object>
-
[]
empty-text
空数据时显示的文本内容,可使用slot="empty-text"设置
string/slot
-
暂无数据
devided
是否展示分割线
Boolean
-
true
row-key
v-for中key字段名称
string
-
index
options - options配置
参数
说明
类型
可选值
默认值
avatar
图标资源路径配置,不配置则不显示,详情见下表
string/object/slot
-
-
title
列表子项的标题配置,不配置则不显示
string/slot
-
-
description
列表子项的描述文字配置,不配置则不显示
string/slot
-
-
avatar类型为String
,表示avatar的资源路径,类型为Object
,可配置头像的形状及资源路径,也可通过插槽自定义头像内容
Avatar Props - 头像配置
参数
说明
类型
可选值
默认值
type
头像类型,即形状
string
circle/square
circle
src
头像资源路径
string
-
-
Events
事件名称
说明
参数
click
点击列表子项时触发
子项的option
Slot
name
说明
avatar
头像
title
标题
description
描述信息/详细内容
empty-text
空数据内容
tooltip
Usage
支持组件及指令形式使用
<!-- usage 1: component -->
< mo-tooltip
content ="this is a tooltip "
>
< mo-button > Hover me</ mo-button >
</ mo-tooltip >
<!-- usage 2: directive -->
< div mo-tooltip ="this is a div "> // 不写默认值为innerText
this is a div
</ div >
属性 Attributes
参数
说明
类型
可选值
默认值
effect
提供的主题
string
dark/light
dark
max-width
最大宽度,单位px,超出换行
number
-
-
content
显示的内容
string
-
-
position
tooltip出现的位置,如果不配置,位置自适应
string
top-left top-center top-right right-top right-center right-bottom bottom-right bottom-center bottom-left left-bottom left-center left-top
top-center
transition
定义过渡动画名,与vue过渡动画组件使用一致
string
-
-
enterable
鼠标是否可以进入tooltip中
boolean
-
true
between-space
弹出框与参考元素的距离
number
-
三角形底边 + 4
open-delay
延迟出现,单位:毫秒
number
-
0
close-delay
延迟出现,单位:毫秒
number
-
0
maxWidth -> max-width
Slot
name
说明
default
触发tooltip显示的HTML元素
content
自定义内容
popover
Usage
< mo-popover
title ="popover title "
>
this is a popver box
< template #reference > Click me</ template >
</ mo-popover >
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
触发方式为手动(manual)生效
boolean
-
-
trigger
触发方式
string
click hover manual
click
width
宽度
number/string
-
150
title
标题
string
-
-
position
popover出现的位置
string
top-left top-center top-right right-top right-center right-bottom bottom-right bottom-center bottom-left left-bottom left-center left-top
top-center
transition
定义渐变动画
string
-
show-arrow
是否显示箭头
boolean
-
true
enterable
鼠标是否可以进入弹出框中,仅在trigger
等于hover
时生效
boolean
-
true
open-delay
延迟出现,单位:毫秒
number
-
0
close-delay
延迟出现,单位:毫秒
number
-
0
Events
事件名称
说明
参数
visible-change
菜单显示状态改变时触发
显示为true,隐藏为false
Slot
name
说明
default
popover内嵌HTML文本
reference
触发popover显示的HTML元素
dropdown
属性 Attributes
参数
说明
类型
可选值
默认值
type
下拉菜单类型
string
link/button
link
label
下拉菜单标签名称
string
-
下拉菜单
disabled
菜单是否禁用
boolean
-
false
trigger
触发下拉的行为
string
hover/click
click
hide-after-selected
选择完成后隐藏下拉选项
boolean
-
true
display-options-number
设置可显示选项的数量,如options.length大于该值,则显示滚动条
number
-
4
options
菜单项配置
Array<object>
-
-
panel-class
下拉菜单项容器的类名
String
-
-
Options Attributes
参数
说明
类型
可选值
默认值
text
显示文本
string/number/object
-
-
value
值
string/number/object
-
-
disabled
禁用
boolean
-
false
divided
显示分割线
boolean
-
false
icon
图标类名,不配置则不显示
string
-
-
Events
事件名称
说明
参数
visible-change
菜单显示状态改变时触发
显示为true,隐藏为false
click-item
点击子菜单时触发
当前子菜单的值string/number/object
tabs
tabs Attributes
参数
说明
类型
可选值
默认值
v-model
当前激活tab的key
string
-
第一个选项卡的value
type
风格类型
string
link/card/button
link
size
大小
string
S/M/L
M
lazy
tab内容加载方式。true使用v-if加载,false使用v-show
string
-
true
disabled
是否全部禁用
boolean
-
false
before-leave
切换标签之前的钩子,若返回false或者返回Promise且被reject,则阻止切换
Function(activeValue, oldActiveValue)
-
-
Events
事件名称
说明
参数
tab-click
tab被选中时触发
(被选中的标签tab实例, 事件对象)
tab-pane Attributes
参数
说明
类型
可选值
默认值
label
选项卡标题
string/slot
-
-
disabled
是否禁用
boolean
-
false
value
与选项卡绑定值value对应的标识符,标识选项卡别名
string
-
该选项卡在选项卡列表中的顺序值,如第一个选项卡则为“1”
tabs Slot
name
说明
default
一般为tab-pane组件
tab-pane Slot
建议name -> value 与其他地方保持同名
默认的slot是否需要写出来?要
考虑中间tab隐藏的场景
steps
steps Attributes
参数
说明
类型
可选值
默认值
active
设置当前激活步骤
number
-
0
space
每个step的间距,单位:px。不填写则自适应间距
number
-
-
process-status
设置当前步骤的状态
string
wait/process/finish/error/disabled
process
finish-status
设置结束步骤的状态
string
wait/process/finish/error/disabled
finish
align-center
文字进行居中对齐
boolean
-
true
step Attributes
参数
说明
类型
可选值
默认值
title
标题
string/slot
-
-
description
描述性文字
string/slot
-
-
icon
icon的class类名
string/slot
-
-
status
设置当前步骤的状态,不设置则根据steps确定状态
string
wait/process/finish/error/disabled
-
step Slot
name
说明
icon
自定义图标
title
自定义标题
description
自定义描述文字
dialog
属性 Attributes
参数
说明
类型
可选值
默认值
v-model
是否显示dialog
boolean
-
false
show-header
是否显示头部
boolean
true
title
dialog的标题,也可通过具名slot传入
-
-
-
width
dialog的宽度,最小宽度为400px,最大宽度为720px
string
-
-
modal
是否需要遮罩层
boolean
-
true
close-on-click-modal
是否可以通过点击modal关闭dialog
boolean
-
true
show-close
是否显示关闭按钮
boolean
-
true
show-confirm
是否显示确定按钮
boolean
-
true
show-cancel
是否显示取消按钮
boolean
-
true
confirm-button-text
确认按钮文字
string
-
确定
cancel-button-text
取消按钮文字
string
-
取消
confirm-button-type
确认按钮类型
string
参考button组件类型
primary
cancel-button-type
取消按钮类型
string
参考button组件类型
info
align-center
是否对头部和底部采用居中布局
boolean
-
false
Events
事件名称
说明
参数
open
打开dialog触发
-
after-close
关闭后回调
-
confirm
点击确定按钮触发
-
cancel
点击取消按钮触发
-
Slot
name
说明
default
dialog的内容
title
dialog标题区的内容
footer
dialog按钮操作区的内容
确定取消按钮的文本修改是否是通过footer去实现?加上文本修改
width不设置会自适应去调整大小嘛?自适应
notice
Usage
this . $notify ( {
title : "notice title" ,
content : "this is notice content" ,
showConfirm : true
} ) . then ( ( ) => {
// 关闭回调
} ) ;
属性 Attributes
参数
说明
类型
可选值
默认值
title
标题
string
-
-
content
说明文字
string
-
-
duration
显示时间,单位:毫秒。设置为0则不会关闭
number
-
4500
position
自定义弹出位置
string
top-right top-left bottom-right bottom-left
top-right
show-close
是否显示关闭按钮
boolean
-
true
show-confirm
是否显示确定按钮
boolean
-
false
confirm-text
确定按钮文本
string
-
确定
dangerouslyUseHTMLString
把content当做html解析
Boolean
-
false
事件删除
返回promise,只有成功没有失败
popconfirm
Usage
const configs = {
title : "" ,
// ...
} ;
this . $popconfirm ( configs )
. then ( ( ) => {
// 点击“确定”后的回调
} )
. catch ( ( ) => {
// 点击“取消”后的回调
} )
Popconfirm Attributes
参数
说明
类型
可选值
默认值
title
标题
string
-
-
icon
Icon图标类名; 如不配置,则隐藏
string
-
-
position
popconfirm出现的位置
string
top-left top-center top-right right-top right-center right-bottom bottom-right bottom-center bottom-left left-bottom left-center left-top
top-center
transition
定义渐变动画
string
-
show-arrow
是否显示箭头
boolean
-
true
open-delay
延迟出现,单位:毫秒
number
-
0
close-delay
延迟出现,单位:毫秒
number
-
0
clickOutsideToHide
点击外部隐藏弹窗
boolean
-
false
show-confirm
是否显示确认按钮
boolean
-
true
show-cancel
是否显示取消按钮
boolean
-
true
confirm-button-text
确认按钮文字
string
-
确定
cancel-button-text
取消按钮文字
string
-
取消
confirm-button-type
确认按钮类型
string
参考button组件类型
primary
cancel-button-type
取消按钮类型
string
参考button组件类型
info
Events
事件名称
说明
参数
confirm
点击确认按钮触发
-
cancel
点击确认按钮触发
-
Slot
name
说明
default
自定义内容
reference
触发popover显示的HTML元素
alert
属性 Attributes
参数
说明
类型
可选值
默认值
title
标题
string
-
-
type
消息类型
string
success/warn/info/error
info
description
消息详细描述,也可通过默认slot传入
string
-
-
icon
图标类名,不传默认取响应状态的值
String
-
-
show-icon
是否显示icon
Boolean
-
true
show-close
是否显示关闭按钮
boolean
-
true
show-details-button
是否显示查看详情按钮
boolean
-
false
Events
事件名称
说明
参数
close
关闭时触发
-
handle-details-click
点击查看详情时触发
-
Slot
name
说明
default
description消息详细描述
message
Usage
// usage1
const msg = this . $message ( {
content : "this is a success message" ,
type : "success"
} ) ;
// usage2
const msg = this . $message . success ( "this is a success message" , 3000 ) ;
// usage3,type="info"
this . $message ( "this is a info message" , 3000 ) ;
Options
参数
说明
类型
可选值
默认值
content
消息内容
string
-
-
type
主题
string
success/warn/info/error
info
showIcon
是否显示icon
boolean
-
true
icon
Icon图标类名,会覆盖type配置
string
-
-
duration
显示时间,单位:毫秒。设为0则不关闭
number
-
2500
dangerouslyUseHTMLString
把content当做html解析,谨慎使用
boolean
-
false
方法 Methods
方法名
说明
参数
success
弹出成功message框
-
error
弹出失败的message框
-
warn
弹出警告的message框
-
执行后返回的实例方法 Methods
方法名
说明
参数
close
关闭当前的message
-
Close分开写
skeleton
Attributes
属性
说明
类型
可选值
默认值
active
是否展示动画效果
boolean
-
false
avatar
是否显示头像占位图
boolean/object
-
false
css
自定义类名
string
-
-
duration
显示时间,单位:毫秒。设为0则不关闭
number
-
3000
loading
为true,显示占位图。反之显示子组件
boolean
-
-
paragraph
是否显示段落占位图
boolean/object
-
true
title
是否显示段落占位图
boolean/object
-
false
Avatar props
属性
说明
类型
可选值
默认值
size
设置头像占位图的大小
number/string
类型为string时,可选值为S/M/L
M
type
头像的形状
string
circle/square
[todo]
Title props
属性
说明
类型
可选值
默认值
width
设置标题占位图的宽度
number/string
-
-
Paragraph props
属性
说明
类型
可选值
默认值
rows
设置段落占位图的行数
number/string
-
-
rows-space
设置段落之间的间距,单位px
number
-
-
width
设置段落占位图的宽度。若为数组,则为对应的每行宽度;反之则是最后一行的宽度
number/string/Array<number | string>
-
-
栅格布局
mo-row Attributes
参数
说明
类型
可选值
默认值
gutter
列间隔,单位px
number
-
0
tag
自定义row元素标签
string
div
mo-col Attribute
参数
说明
类型
可选值
默认值
span
栅格占据的列数(一行总共分为24列)
number
-
24
tag
自定义col元素标签
string
-
div
offset
栅格左侧的间隔格数
number
-
0
padding
栅格内垂直方向上padding,单位px
number
-
0
slot
mo-row和mo-col内都有默认的slot承载内容
mo-container 布局容器
属性 Attributes
参数
说明
类型
可选值
默认值
width
容器宽度
string/number
-
100%
aside-width
左侧导航宽度
string/number
-
256
header-height
顶部导航栏高度,单位px
number
-
64
footer-height
底部信息栏高度,单位px
number
-
64
Slot
name
说明
header
顶部导航
aside
左侧导航
default
内容区域
footer
底部信息栏
mo-chart-line
属性 Attributes
参数
说明
类型
可选值
默认值
colors
数据列颜色配置
array
-
['#FFCD58','#ACE06F', '#7EE6F2','#6EBBFF', '#FF7348','#B792F7']
series
数据列
array
categories
类别,对应x轴描述
array
-
-
legend
图例
string
circle, square
circle
animation
动画效果,空表示不需要动画
string
-
easeOutCubic
width
宽,单位px
number
-
外层容器的宽
height
高,单位px
number
-
外层容器的高
type
折线类型
number
1: 直线 2: 曲线
2
tip-text
鼠标悬浮预留提示信息,独行显示
string
-
-
show-tip
鼠标悬浮显示数据
boolean
-
true
title
图表标题
string
-
-
comment
图表注释
string
-
-
show-point
是否显示曲线坐标点
boolean
-
false
is-offset
是否从坐标原点后面开始绘制
boolean
-
true
series数据项属性
参数
说明
类型
可选值
默认值
name
系列名称
string
-
-
data
系列数据
array
-
-
事件Events
方法名
说明
参数
legendClick
图例点击事件
被点击的图例名称
mo-chart-bar
属性 Attributes
参数
说明
类型
可选值
默认值
colors
数据列颜色配置
array
-
['#FFCD58','#ACE06F', '#7EE6F2','#6EBBFF', '#FF7348','#B792F7']
series
数据列
array
categories
类别,对应x轴描述
array
-
-
legend
图例
string
circle, square
circle
animation
动画效果,空表示不需要动画
string
-
easeOutCubic
width
宽,单位px
number
-
外层容器的宽
height
高,单位px
number
-
外层容器的高
tip-text
鼠标悬浮预留提示信息,独行显示
string
-
-
show-tip
鼠标悬浮显示数据
boolean
-
true
title
图表标题
string
-
-
comment
图表注释
string
-
-
show-value
是否在柱条上显示数值
boolean
-
false
series数据项属性
参数
说明
类型
可选值
默认值
name
系列名称
string
-
-
data
系列数据
array
-
-
事件Events
方法名
说明
参数
click
柱子点击事件
{ value: data.value, legend: data.legend, category: data.category }
legendClick
图例点击事件
被点击的图例名称
mo-chart-pie
属性 Attributes
参数
说明
类型
可选值
默认值
colors
数据列颜色配置
array
-
['#FFCD58','#ACE06F', '#7EE6F2','#6EBBFF', '#FF7348','#B792F7']
series
数据列
array
categories
类别
array
-
-
legend
图例
string
circle, square
circle
animation
动画效果,空表示不需要动画
string
-
easeOutCubic
width
宽,单位px
number
-
外层容器的宽
height
高,单位px
number
-
外层容器的高
tip-text
鼠标悬浮预留提示信息,独行显示
string
-
-
show-tip
鼠标悬浮显示数据
boolean
-
true
title
图表标题
string
-
-
comment
图表注释
string
-
-
事件Events
方法名
说明
参数
click
图形点击事件
被点击的数据和索引
legendClick
图例点击事件
被点击的图例
mo-chart-percent
属性 Attributes
参数
说明
类型
可选值
默认值
type
类型
string
circle、line
circle
title
标题
string
-
-
value
值
number
-
-
colors
区间对应的颜色值
array
-
['#ff801f']
color-value
颜色对应的值区间
array
-
[1]
back-color
与colors对应的底色值
array
-
['#e9e9e9']
width
宽,单位px
number
-
外层容器的宽
height
高,单位px
number
-
外层容器的高
stroke-width
线条的粗细,单位px
number
-
8
padding
图形容器的内边距,单位px
number
-
20
show-text
是否显示图形上的提示文本
boolean
-
true
text-position
文本显示位置
boolean
right、auto
auto
text-width
右侧显示文本的宽度,单位px
Number、String
-
40
Slot
name
说明
default
默认显示百分比,在圆环内或者在直线上
mo-progress
属性 Attributes
参数
说明
类型
可选值
默认值
type
类型
number
circle、line
circle
state
状态
string
success、progress、error
progress
value
值
number
-
-
progressColor
进行中的颜色值
string
-
#ff801f
successColor
完成的颜色值
string
-
#17cc82
errorColor
失败的颜色值
string
-
#f7421e
back-color
与 colors 对应的底色值
array
-
#e9e9e9
width
宽,单位 px
number
-
外层容器的宽
height
高,单位 px
number
-
外层容器的高
stroke-width
线条的粗细,单位 px
number
-
8
padding
图形容器的内边距,单位 px
number
-
20
icon-size
图标或者文本的大小
number
-
14
mo-collapse
属性 Attributes
参数
说明
类型
可选值
默认值
title
标题
string
-
-
text
内容
string
-
-
actived/v-model
展开状态
boolean
-
false
disabled
禁用
boolean
-
false
Slot
name
说明
default
内容区,优先级高于text
title
标题区
mo-badge 徽标数
属性 Attributes
参数
说明
类型
可选值
默认值
text
内容
string
-
-
type
圆点或小圆
string
dot(圆点),tip
tip
status
不同状态不同颜色
string
success, error, warn, default
default
position
圆点位置
string
rt
-
position: 为空,在正常的文档流中,不添加任何定位效果。
Slot
mo-loading 加载中
属性 Attributes
参数
说明
类型
可选值
默认值
visible
是否显示
boolean
-
false
size
尺寸
string
S/M/L
M
target
遮罩内容
object(HTMLElement)
-
默认为外层容器
has-mask
是否有遮罩
boolean
-
true
text
显示文本
string
-
-
background
旋转点背景色
string
-
#ff8f00
target的position不能为static,否则遮罩不生效
slot
name
说明
default
内容区域,优先级高于text
mo-scroll 滚动条
参数
说明
类型
可选值
默认值
height
最大高度,超出出现滚动条,必填
number,string
数值,inherit,auto
inherit
width
最大宽度,超出出现滚动条,必填
number
-
外层容器宽度
overflow
设置哪个方向出现滚动条
string
x,y, auto, hidden
auto
is-block
是否是块级元素,占满一行
boolean
-
true
to-x
滚动到X轴的具体位置,单位px
number
-
0
to-y
滚动到Y轴的具体位置,单位px
number
-
0
to-index
滚动到第几个元素
number
-
-
height
为inherit
时继承父级容器的高度,要保证外层容器可以取得高。为auto
时表示不会出现垂直滚动条。
不设置height
和width
时,要保证外层容器可以取得高或者宽
to-index
默认会选中当前slot的最外层元素的第index
个子元素,优先级高于scroll-to-y
method
方法
说明
参数
scrollTo(selector)
滚动到某个dom
元素
dom
的唯一选择器,可以精确定位当前元素
update()
滚动条内部内容修改后,需要调用该方法手动更新滚动条
-
scrollToX(to)
水平滚动条滚动到to位置
滚动到的位置,单位px
scrollToY(to)
垂直滚动条滚动到to位置
滚动到的位置,单位px
scrollToIndex(index)
滚动到第几个元素
元素索引,从1开始
setSize(height, width, isScrollToTop)
修改容器的宽高
高,框,是否滚动到左上角
slot
name
说明
default
内容区域,只能有一个最外层元素包裹内容
mo-x-scroll 滚动条
参数
说明
类型
可选值
默认值
height
最大高度,超出出现滚动条,必填
number,string
数值,inherit,auto
inherit
width
最大宽度,超出出现滚动条,必填
number
-
外层容器宽度
overflow
设置哪个方向出现滚动条
string
x,y, auto, hidden
auto
is-block
是否是块级元素,占满一行
boolean
-
true
to-x
滚动到X轴的具体位置,单位px
number
-
0
to-y
滚动到Y轴的具体位置,单位px
number
-
0
to-index
滚动到第几个元素
number
-
-
count
最多显示行数
number
-
5
height
为inherit
时继承父级容器的高度,要保证外层容器可以取得高。为auto
时表示不会出现垂直滚动条。
不设置height
和width
时,要保证外层容器可以取得高或者宽
to-index
默认会选中当前slot的最外层元素的第index
个子元素,优先级高于scroll-to-y
slot
name
说明
default
内容区域,只能有一个最外层元素包裹内容