npm install artus-components --save
element-plus": "^2.2.27"
"vue": "^3.2.41"
"vite": "^3.2.3"
由于 Vue 3 不再支持 IE11,artus-components 也支持 IE 浏览器,及vue2工程项目
import artusComponents from 'artus-components/lib'
app.use(artusComponents)
import {
artusForm,
artusDialog,
artusTable,
artusPagination,
artusColorPicker,
componentConfig
} from 'artus-components/lib'
组件包 | 组件名 |
---|---|
artusForm | 表单组件 |
artusDialog | 弹窗组件 |
artusTable | 表格组件 |
artusPagination | 分页组件 |
artusColorPicker | 颜色选择器 |
componentConfig | 组件配置项 |
<artus-table :tableHeader="tableHeader"
:configOption="{highlightCurrentRow:true,stripe: true}"
className="artus_view_table"
:tableData="tableData">
参数 | 说明 | 类型 | 默认值 | 示例 |
---|---|---|---|---|
tableHeader | 表头数据 | array | [] | [ { name: '名称', val: 'name', filter: 'deviceTypeImg', classCode: 'red' }, { name: '操作', type: 'button', val: [ { title: '编辑', type: 'change' } ] } ] |
tableData | 显示的数据 | array | [] | |
loading | 加载状态 | boolean | false | |
selection | 开启多选 | boolean | false | |
serial | 是否显示序号 | boolean | false | |
className | 表格class名称 | string | ||
filter | 过滤器 | function | ||
auth | 权限 | function | ||
border | 是否显示边框 | boolean | false | |
maxHeight | 最大高度(通过CSS计算出表格高度) | number | 250px | |
configOption | 表格配置项,详情见element-plus文档 | Object | { stripe: false, 'highlight-current-row': true } |
事件名 | 说明 | 参数 |
---|---|---|
tableBtnChange | 表格按钮类型为change时,按钮回调事件 | row,obj,index |
tableBtnDelect | 表格按钮类型为delect时,按钮回调事件 | row,obj,index |
tableBtnReset | 表格按钮类型为reset时,按钮回调事件 | row,obj,index |
otherBtn | 表格按钮类型不为change,delect,reset时,按钮回调事件 | row,obj,index |
事件名 | 说明 | 参数 |
---|---|---|
defaultFirst | 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 | row |
defaultMore | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected |
clearChoose | 用于多选表格,清空用户的选择 | |
clearSort | 用于清空排序条件,数据会恢复成未排序的状态 | |
clearFilter | 不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由columnKey组成的数组以清除指定列的过滤条件 |
<artus-pagination :total="total" :pageSize="pageSize" :page="page"
@currentPageData="currentPageData"></artus-pagination>
参数 | 说明 | 类型 |
---|---|---|
layout | 组件布局,子组件名用逗号分隔. (prev, pager, next, jumper, ->, total) | string |
pageSizes | 每页显示个数选择器的选项设置 | Array |
pageSize | 每页显示条目个数 | number |
page | 当前页数 | number |
total | 总条目数 | number |
count | 页码按钮的数量,当总页数超过该值时会折叠默认7 | number |
事件名称 | 说明 | 回调参数 |
---|---|---|
currentPageData | pageSize 改变时会触发 page 改变时会触发 | 当前页,每页条数 |
<artus-form :formList="formList" :formData="formData" ref="ruleFormRef"
:config="{labelWidth:'100px'}">
</artus-form>
参数 | 说明 | 类型 |
---|---|---|
formData | 表单数据对象 | object |
formList |
表单元素对象 { label: 表单lable名称, type: textarea-文本,time-时间选择, select-select选择, radioGroup-单选组,radioButton-单选按钮,slider-进度条,inputNumber-数字输入器,switch-切换 prop: 对应formData映射key, setRule: 验证规则,数据类型:string,Array(内置规则:required-必填,mail-邮件,phone-手机,json-json), rulesMessage: 验证提示,数据类型:String,Array, customRulesMessage:自定义验证规则。数据类型:Array(请参考element-plus), config:表单组件配置,(请参考element-plus), fun:回调方法, slotName:自定义插槽 } |
array |
config | Form Attributes 设置。请参考element-plus |
方法名 | 说明 | 参数 |
---|---|---|
validate | 对整个表单进行校验的方法。会返回一个 promise | resolve(formData) |
initRules | 重新初始化验证规则,应用于动态表单场景 |
<artus-dialog title="数据集过滤条件设置" @close-dialog="closeDialog" @save="save" width="800px">
<template #default>
<div></div>
</template>
</artus-dialog>
参数 | 说明 | 类型 |
---|---|---|
title | Dialog 对话框 Dialog 的标题, | string |
toBody | Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true.默认false | boolean |
saveBtnName | 保存按钮名称 | string |
saveLoading | 保存Loading状态默认false | boolean |
width | 弹窗宽度默认900px | string |
showFooter | 是否显示按钮默认true | boolean |
事件名 | 说明 | 参数 |
---|---|---|
closeDialog | Dialog 关闭的回调 | - |
save | 点击保存按钮时回调 | - |
<colorPicker v-model="color"
@change="change"></colorPicker>
参数 | 说明 | 类型 |
---|---|---|
modelValue | 绑定的颜色 | string |
defaultColor | 默认颜色 | string |
disabled | 禁用状态 | boolean |
事件名 | 说明 | 参数 |
---|---|---|
change | 颜色选择,或输入回调 | color |
import {componentConfig} from 'artus-components/lib'
示例:componentConfig.namespace = 'why'
参数 | 说明 | 类型 |
---|---|---|
namespace | 自定义命名空间 | string |
validatorMessage | 表单组件验证提示方式。默认true:message提示。 | boolean |
filter | 自定义过滤器指令 | function |
auth | 自定义权限指令 | function |
autoloadmore | 自定义表格组件滚动指令 | function |