Kd-web-ui NPM | npm.io

kd-web-ui

安装教程

npm install kd-web-ui;
import KdWebUI from 'kd-web-ui';
Vue.use(KdWebUI);

组件说明

kd-dialog

属性

属性名	值类型	是否必须	默认值	说明
title	String	否		标题
open	Boolean	是		是否打开
width	String	否	700px	宽度
hasSelfDialog	Boolean	否	false	是否有留白样式
hasFooter	Boolean	否	false	是否有底部按钮组
hasSave	Boolean	否	false	底部按钮组是否暂存按钮

事件

事件名	参数	说明
onClose	-	当关闭dialog时触发事件,点击取消按钮也会触发
onConfirm	-	当点击确定按钮时触发事件
onSave	-	当点击暂存按钮时触发事件

kd-pagination

属性

属性名	值类型	是否必须	默认值	说明
total	Number	是		总数
page	Number	否	1	当前页码
limit	Number	否	20	每页显示数量
pageSizes	Array	否	10, 20, 30, 50	每页显示数量备选项
pagerCount	Number	否	7	最大显示页码个数
layout	String	否	total, prev, pager, next	布局，可选项total, prev, pager, next, sizes, jumper
background	Boolean	否	true	是否有背景色

事件

事件名	参数	说明
pagination	{page:Number,limit:Number}	当limit/page改变时会触发

kd-search-condition

属性

属性名	值类型	是否必须	默认值	说明
options	Array	是		搜索条件配置项
labelWidth	String	否	-	label宽度
fromEleWidth	String	否		表单元素宽度
noReset	Boolean	否	false	是否没有重置按钮

条件配置项options

属性名	值类型	是否必须	默认值	说明
label	String	是		显示文本
key	String	是		条件字段
type	String	是		输入方式, 备选：input, select, treeselect, checkbox, year, month, date, week, datetime, datetimerange, daterange, monthrange
placeholder	String	否	请选择/请输入 + label	非日期范围类的placeholder
dataOptions	Array	否		当type为select/checkbox/treeselect时是必须,包含对象{value:String/Number,label:String}
startPlaceholder	String	否	开始日期/开始时间	日期范围类的start-placeholder
endPlaceholder	String	否	结束日期/结束时间	日期范围类的end-placeholder
separator	String	否	-	日期范围类的分隔符
valueFormat	String	否		日期类的值格式
format	String	否		日期类的值显示格式
defaultValue	Any	否		设定默认值

事件

事件名	参数	说明
onSearch	{各条件项key:value}	当点击搜索/重置按钮时会触发

kd-search-result

属性

属性名	值类型	是否必须	默认值	说明
loading	Boolean	否	false	是否显示loading
hasMultSelect	Boolean	否	false	是否有多选
removeHoverStyle	Boolean	否	false	是否移除鼠标hover效果
resultData	Array	是		数据集,当使用tree展示时,必须有id,children字段
columnsConfig	Array	是	false	列配置

列配置columnsConfig

属性名	值类型	是否必须	默认值	说明
label	String	是		列显示文本
propKey	String	是		列数据key,对应数据集
align	String	否	center	对齐方式
width	String	否		列宽
showOverflowTooltip	Boolean	否	false	是否带有tooltip
fixed	String	否		列固定方式
action	Array	否		操作按钮组
labelType	String	否		数据显示方式，备选项：link，template
linkHrefKey	String	否		link的href的列key,labelType为link时有效
linkableFunc	Function	否		link是否可用,function(rowlinkHrefKey){ return Boolean },labelType为link时有效
otherHandle	Function	否		其他处理函数，function(rowpropKey){ return 数据值 }
children	Array	否		嵌套列配置

操作按钮组action

属性名	值类型	是否必须	说明
label	String	是	按钮显示文本
hasPermi	Array	否	权限控制
disabledFunc	Function	否	定义按钮是否可用，function(row) {return Boolean}
clickEvent	Function	否	定义按钮点击事件，function(row){}

事件

事件名	参数	说明
onSelectedChange	selection:Array	当选择项发生变化时会触发该事件
onSelected	selection:Array	当手动勾选数据行的 Checkbox时触发的事件
onSelectedAll	selection:Array	当手动勾选全选 Checkbox 时触发的事件
onClickLink	row, 该列配置项	当点击link数据时触发事件

kd-content-layout

属性

属性名	值类型	是否必须	默认值	说明
hasCatalogue	Boolean	否	true	是否有目录区域

kd-action-group

属性

属性名	值类型	是否必须	默认值	说明
actionConfig	Object	是		配置项

配置项actionConfig说明

属性名	值类型	是否必须	说明
add	Object	否	新增按钮配置项
edit	Object	否	编辑按钮配置项
delete	Object	否	删除按钮配置项
upload	Object	否	导入按钮配置项
download	Object	否	导出按钮配置项

通用配置项

属性名	值类型	是否必须	默认值	说明
label	String	否	新增/编辑/删除/导入/导出	显示文本
clickEvent	Function	否		点击事件处理函数

kd-group-catalogue

属性

属性名	值类型	是否必须	默认值	说明
placeholder	String		请输入	占位符
addBtnConfig	Object			新增按钮配置项
treeData	Array	是		tree数据源，{id,label,children}
hideEditBtnFunc	Function			定义编辑按钮是否隐藏，function(nodeData) {return Boolean}
hideDeleteBtnFunc	Function			定义删除按钮是否隐藏，function(nodeData) {return Boolean}
defaultExpandDeep	Number		3	tree默认展开到深度,备选：2-5

新增按钮配置项addBtnConfig说明

属性名	值类型	是否必须	默认值	说明
label	String	否	新增	显示文本
hasPermi	Array	否		权限控制
clickEvent	Function	否		点击事件处理函数

事件

事件名	参数	说明
onClickNode	nodeData:Object	当点击树节点时会触发该事件
onClickEdit	nodeData:Object	当点击编辑图标时触发的事件
onClickDelete	nodeData:Object	当点击删除图标时触发的事件

方法

方法名	参数	返回值	说明
getTreeRef		树ref对象	获取树ref对象

kd-file-upload-dialog

属性

属性名	值类型	是否必须	默认值	说明
title	String	否		标题
uploading	Boolean		false	是否显示loading
fileFmt	Array		[]	允许导入的文件格式,空数组表示任意格式
templateConfig	Object		{label: "下载模板",show: true}	模板下载配置项
tipOption	Object		{label: "提示：允许导入任意格式文件！",show: true}	tip配置项，label中显示的文件格式会随fileFmt的配置变化

事件

事件名	参数	说明
onDownloadTemplate		当点下载模板按钮时会触发该事件
onClose		当关闭dialog时触发事件,点击取消按钮也会触发
onConfirm		当点击确定按钮时触发事件