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:原始文件名称} |