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

事件名	说明	参数
click	按钮事件	—

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	说明
default	tab内容区

建议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

name	说明
default	内容区域

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

name	说明
default	内容区

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	内容区域，只能有一个最外层元素包裹内容

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
build		build
demo		demo
docs		docs
img		img
langs/cn		langs/cn
public		public
src		src
.browserslistrc		.browserslistrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
README.md		README.md
babel.config.js		babel.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
vue.config.js		vue.config.js

Aras-ax/mo-ui

Folders and files

Latest commit

History

Repository files navigation

mo-ui

API

mo-button

属性 Attributes

事件 Events

mo-slider 滑动条

属性 Attributes

事件 Events

mo-input 输入框

属性 Attributes

事件 Events

方法 Methods

mo-input-group

属性 Attributes

事件 Events

mo-input-number

属性 Attributes

事件 Events

mo-select 选择器

属性 Attributes

options

事件 Events

mo-timepicker 时间选择器

属性 Attributes

事件 Events

mo-datepicker 日期选择器

属性 Attributes

事件 Events

mo-radio 单选框

属性 Attributes

options属性

事件 Events

mo-checkbox 复选框

属性 Attributes

事件 Events

mo-checkbox-group 多选框组

属性 Attributes

options

事件 Events

mo-switch 开关

属性 Attributes

事件 Events

mo-upload 上传

属性 Attributes

事件 Events

mo-table 表格

属性 Attributes

Slot

方法 Methods

事件 Events

mo-table-col 属性 Attributes

mo-table-col slot

mo-pagination 分页

属性 Attributes

事件 Events

mo-form 表单

属性 Attributes

rules 验证规则

验证规则

验证类型

支持自定义验证

方法 Methods

事件 Events

mo-form-item 表单元素

属性 Attributes

方法 Methods

mo-form-item slot

list

List Attributes - 列表属性

options - options配置

Avatar Props - 头像配置

Events

Slot

tooltip

Usage