artus-components

安装

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工程项目

引入方式，组件列表

1.全局引入

import artusComponents from 'artus-components/lib' 
app.use(artusComponents)

2.按需引入

import {
artusForm, 
artusDialog,
artusTable,
artusPagination,
artusColorPicker,
componentConfig
} from 'artus-components/lib'

组件包	组件名
artusForm	表单组件
artusDialog	弹窗组件
artusTable	表格组件
artusPagination	分页组件
artusColorPicker	颜色选择器
componentConfig	组件配置项

artusTable(表格)

<artus-table :tableHeader="tableHeader" 
:configOption="{highlightCurrentRow:true,stripe: true}" 
className="artus_view_table"
:tableData="tableData">

artusTable Attributes

参数	说明	类型	默认值	示例
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 }

artusTable Events

事件名	说明	参数
tableBtnChange	表格按钮类型为change时，按钮回调事件	row,obj,index
tableBtnDelect	表格按钮类型为delect时，按钮回调事件	row,obj,index
tableBtnReset	表格按钮类型为reset时，按钮回调事件	row,obj,index
otherBtn	表格按钮类型不为change，delect，reset时，按钮回调事件	row,obj,index

artusTable Methods

事件名	说明	参数
defaultFirst	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
defaultMore	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
clearChoose	用于多选表格，清空用户的选择
clearSort	用于清空排序条件，数据会恢复成未排序的状态
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件

artusPagination（分页）

<artus-pagination :total="total" :pageSize="pageSize" :page="page"
                        @currentPageData="currentPageData"></artus-pagination>

artusPagination Attributes

参数	说明	类型
layout	组件布局，子组件名用逗号分隔. (prev, pager, next, jumper, ->, total)	string
pageSizes	每页显示个数选择器的选项设置	Array
pageSize	每页显示条目个数	number
page	当前页数	number
total	总条目数	number
count	页码按钮的数量，当总页数超过该值时会折叠默认7	number

artusPagination Events

事件名称	说明	回调参数
currentPageData	pageSize 改变时会触发 page 改变时会触发	当前页，每页条数

artusForm（表单）

<artus-form :formList="formList" :formData="formData" ref="ruleFormRef"
                  :config="{labelWidth:'100px'}">
      </artus-form>

artusForm Attributes

参数	说明	类型
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

参数

说明

类型

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

artusForm Methods

方法名	说明	参数
validate	对整个表单进行校验的方法。会返回一个 promise	resolve(formData)
initRules	重新初始化验证规则，应用于动态表单场景

artusDialog（弹窗）

<artus-dialog title="数据集过滤条件设置" @close-dialog="closeDialog" @save="save" width="800px">
      <template #default>
        <div></div>
      </template>
    </artus-dialog>

artusDialog Attributes

参数	说明	类型
title	Dialog 对话框 Dialog 的标题，	string
toBody	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true.默认false	boolean
saveBtnName	保存按钮名称	string
saveLoading	保存Loading状态默认false	boolean
width	弹窗宽度默认900px	string
showFooter	是否显示按钮默认true	boolean

artusDialog Events

事件名	说明	参数
closeDialog	Dialog 关闭的回调	-
save	点击保存按钮时回调	-

artusColorPicker（颜色选择）

<colorPicker  v-model="color"
   @change="change"></colorPicker>

artusColorPicker Attributes

参数	说明	类型
modelValue	绑定的颜色	string
defaultColor	默认颜色	string
disabled	禁用状态	boolean

artusColorPicker Events

事件名	说明	参数
change	颜色选择，或输入回调	color

componentConfig（组件库设置）

import {componentConfig} from 'artus-components/lib'
示例：componentConfig.namespace = 'why'

componentConfig Attributes

参数	说明	类型
namespace	自定义命名空间	string
validatorMessage	表单组件验证提示方式。默认true：message提示。	boolean
filter	自定义过滤器指令	function
auth	自定义权限指令	function
autoloadmore	自定义表格组件滚动指令	function