hundun-ui-component

hundun-ui-component 前端组件库

仓库

当前组件库发布在 私有仓库中，仓库地址: http://10.43.219.188:4873/

// 设置仓库地址
npm config set registry http://10.43.219.188:4873

安装

npm install --save  hundun-ui-component

引用与配置

 // 导入组件库
import hundunComponent  from 'hundun-ui-component'
// 注册组件库
Vue.use(hundunComponent) 
// 配置axios
// 其中axios为当前前端项目配置好的axios封装，后续将使用当前项目的axios进行组件内部的http请求
window.http = axios 

页面引用示例

<div id="app"> 
    <hundun-dict-select v-model="value" dict-type="sex" style="width:200px"/> 
</div>

目前已经封装的组件包含：

1、 hundun-dict-select 数据字典-下拉选择

2、 hundun-dict-radio 数据字典-单选

3、 hundun-dict-checkbox 数据字典-复选

4、 hundun-dict 数据字典-回显

5、 hundun-fileupload 文件上传

6、 hundun-org-select 区划选择

7、 hundun-org-any-select 区划选择-任意一级

8、 hundun-org 区划回显

9、 hundun-icon icon图标

10、 hundun-table 数据表格

11、 hundun-user 用户回显

12、 hundun-imageupload 图片上传

13、 hundun-dialog 弹出框

14、 hundun-imageupload-cutter 图片裁切上传

hundun-dict-select

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	String/Array	-	-
dictType	对应数据字典，不能为空	string	-	-
styleclass	样式	String	-	width:100%
placeholder	提示placeholder	String	-	-
disabled	是否禁用	Boolean	true/false	false
multiple	是否多选	Boolean	true/false	false
clearable	清空	Boolean	true/false	false
multipleLimit	多选下最多选几个	Integer	-	-
excludeValue	过滤掉字典中哪些值，可以是字典label也可以是字典value，逗号分割	String	-	-
includeValue	字典中只显示哪些值，可以是字典label也可以是字典value，逗号分割	String	-	-
filterable	是否自带过滤	StBooleanring	-	false

hundun-dict-radio

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string / number / boolean	-	-
dict-type	对应数据字典，不能为空	string	-	-
placeholder	提示placeholder	String	-	-
disabled	是否禁用	boolean	true/false	false

hundun-dict-checkbox

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string / number / boolean	-	-
dict-type	对应数据字典，不能为空	string	-	-
placeholder	提示placeholder	String	-	-
disabled	是否禁用	boolean	true/false	false

hundun-dict

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string / Array	-	-
type	字典类型	string	-	-
split-char	分隔字符	string	-	,

hundun-fileupload

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string / Array	-	-
read-only	文件只读	boolean	true/false	false
accept	允许文件上传的类型	string	-	-
show-accept	是否显示支持文件类型	Boolean	true/false	true
multiple	是否支持多个文件	boolean	true/false	false
limit	图片上传数量	number	-	-
imgdown-but	图片模式下下载按钮是否显示	boolean	true/false	false
file-size	文件大小(Mb)	number	-	10
limit-auto-hidden	超导最大文件数量后是否还显示上传文件按钮	boolean	true/false	false
width	图片模式下上传后图片压缩宽度	number	-	-
show-list	是否展示文件列表	boolean	true/false	true
watermark	是否给上传文件添加水印	number/String	1-只保留水印文件 2-源文件和水印文件都要	-
watermark-position	水印位置	string	leftTop rightTop leftBottom rightBottom	-
watermark-type	水印类型	string	icon text	-
watermark-content	水印内容 类型=icon时需要提前再nacos中配好对应类型的图片	string		-

事件

回调方法	说明	参数
uploadChange	图片上传后图片的详情回调	{id:xxx,url:文件url,fileSize:文件大小,oldFileName:原始文件名称}

hundun-org-select

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string	-	-
width	宽度	String	-	250px
one-by-one	一个接一个选	Boolean	true/false	false
disabled	是否禁用	Boolean	true/false	false
max-level	最大显示层级	Number	1,2,3	3

hundun-org-any-select

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string	-	-
disabled	是否禁用	Boolean	true/false	false
parent-code	过滤省代码	Strig	(610000)
level	最大层级	Number	1-省级 2-地市 3-区县	3
check-strictly	是否严格的遵守父子节点不互相关联	Boolean		true
emit-path	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	Boolean		false

hundun-org

参数	说明	类型	可选值	默认值
v-model	绑定区划值	string	-	-
showAllPath	是否显示全部路径	Boolean	true/false	true
separator	路径显示分割字符	String	-	/

hundun-icon

Attributes

参数	说明	类型	可选值	默认值
name	图标名称必填	string	-	-
class-name	文件图标样式	String	-	-
width	宽度	Integer	-	24
multiple	是否支持多个文件	boolean	true/false	false
height	高度	Integer	-	24

hundun-table

Attributes

参数	说明	类型	可选值	默认值
datas	显示的数据，必填	array	-	-
columns	显示的表头，必填（格式参见下表）	array	-	-
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	string/number	-	-
stripe	是否为斑马纹 table	boolean	true/false	false
border	是否带有纵向边框	boolean	true/false	false
show-summary	是否在表尾显示合计行	boolean	true/false	false
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	-	-
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	-	-
dblclick	双击击时会触发该事件	Function	-	-
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	-	-
show-index	是否显示下标	boolean	true/false	false
show-selection	是否开启选项(单选状态为单选框/多选状态为复选框)	boolean	true/false	false
multiple	是否多选	boolean	true/false	false
page	是否分页	boolean	true/false	true

columns 的配置属性

参数	说明	类型	可选值	默认值
prop	对应列内容的字段名，必填	string	-	-
label	显示的标签，必填	string	-	-
width	宽度	number	-	-
fix	是否固定	boolean	true/false	false

hundun-user

Attributes

参数	说明	类型	可选值	默认值
value	用户ID	string	-	-

hundun-imageupload

Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值	string	-	-
read-only	只读	boolean	true/false	false
accept	允许文件上传的类型	string	-	-
file-size	文件大小(Mb)	number	-	10
width	图片压缩后的宽度,不填则不压缩	number	-
watermark	是否给上传文件添加水印	number/String	1-只保留水印文件 2-源文件和水印文件都要	-
watermark-position	水印位置	string	leftTop rightTop leftBottom rightBottom	-
watermark-type	水印类型	string	icon text	-
watermark-content	水印内容 类型=icon时需要提前再nacos中配好对应类型的图片	string		-

事件

回调方法	说明	参数
uploadChange	图片上传后图片的详情回调	{id:xxx,url:文件url,fileSize:文件大小,oldFileName:原始文件名称}

hundun-dialog

Attributes

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	—	false
title	Dialog 的标题，也可通过具名 slot （见下表）传入	string	—
width	Dialog 的宽度	string	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上	boolean	—	true
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	Dialog 的自定义类名	string — —
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog	—	—
center	是否对头部和底部采用居中布局	boolean	—	false
destroy-on-close	关闭时销毁 Dialog 中的元素	boolean	—	false
drag	是否可以拖拽	boolean	—	true

插槽

名称	说明
-	Dialog 的内容
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

事件

回调方法	说明	参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—

hundun-imageupload-cutter

配置信息

参数	说明	类型	可选值	默认值
v-model	绑定值-图片地址	string	-	-
read-only	只读	boolean	true/false	false
original-graph	原图裁剪	boolean	true/false	false
move-able	允许拖动裁剪框	boolean	true/false	true
img-move	允许移动图片	boolean	true/false	true
scale-able	允许缩放图片	boolean	true/false	true
box-height	裁剪组件高度	number	-	458
cut-width	选择框宽度	number	-	250
cut-height	选择框高度	number	-	250
quality	图片质量	number	0-1	1
rate	宽高比	string	1:1/2:1/16:9	-
file-type	返回文件类型	string	-
size-change	允许修改选择框尺寸	true/false	-	true

事件

回调方法	说明	参数
uploadChange	图片上传后图片的详情回调	{id:xxx,url:文件url,fileSize:文件大小,oldFileName:原始文件名称}