1.0.4 • Published 4 years ago
huibur-antd-vue-pro v1.0.4
HUIBUR_VUE_ANT_PRO说明文档
前言
使用说明
- 导入方式：import {hSearch, hList} from '@/components/HB/index.js'
- 禁止外部组件直接操作组件中data的属性值，所有data属性均通过方法进行驱动
- 外部组件仅可调用props的属性，以及公共部分的方法，禁止调用非公共部分的方法。
- 所有的公共方法均以 “” 开头,即父组件禁止调用非 “” 开头的方法
- 组件统一入口为@/components/HB/index.js
- const.js 中放置组件中使用的常量数据
const.js
TYPE_ENUM
组件中控件的枚举值
| 参数 | 说明 | 版本 |
|---|---|---|
| INPUT | 输入框 | 1.0 |
| INPUT_NUMBER | 数字输入框 | 1.0 |
| SELECT | 选择框 | 1.0 |
| SELECT_FILTER | 选择框—本地过滤 | 1.0 |
| SELECT_SEARCH | 选择框—搜索 | 1.0 |
| SELECT_MULIT | 选择框—多选 | 1.0 |
| SELECT_MULIT_FILTER | 选择框—多选-本地过滤 | 1.0 |
| SELECT_MULIT_SEARCH | 选择框—多选-搜索 | 1.0 |
| SELECT_INPUT | 选择框-搜索即输入 | 1.0 |
| DATEPICKER | 日期 | 1.0 |
| LINK | 超链接,即a标签 | 1.0 |
| TEXT | 文本 | 1.0 |
| CHECKBOX | CHECKBOX | 1.0 |
| CHANGE | 需要转换的数据 | 1.0 |
| OPERATION | 操作 | 1.0 |
| IMG | 图片 | 1.0 |
组件
Confirm
公共方法
| 事件名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
| _show | 显示 | (title, content, cb)；title：标题，content：描述内容, cb：点确认的回调函数 | 1.0 |
Form
Header
Search
属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| btnIcon | 按钮ICON | String | 'search' | 1.0 |
| btnTitle | 按钮标题 | String | '搜索' | 1.0 |
| items | 控件组 | [Search-Item] | 10 | 1.0 |
Search-Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 标题 | String | - | 1.0 |
| key | 唯一标识，字段键值 | String | - | 1.0 |
| placeholder | 默认文字 | String | '请选择' | 1.0 |
| type | 控件类型 | TYPE_ENUM | - | 1.0 |
| required | 是否必须 | Boolean | false | 1.0 |
| disabled | 是否禁用 | Boolean | false | 1.0 |
| format | 日期格式 | String | "YYYY-MM-DD HH:mm:ss" | 1.0 |
| selectItems | 选择项 | [SelectItem] | 10 | 1.0 |
回调事件
| 事件名称 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| searchClick | 搜索按钮点击 | Function(form);form: 被设置的表单模型值 | 1.0 |
| selectSearch | 选择框搜索事件 | Function(info); info:{kw, item, form}; kw:关键字，item: 被执行的控件信息；form：设置的表单模型数据 | 1.0 |
| selectChange | 选择框选择事件 | Function(info); info:{item, form}; item: 被执行的控件信息；form：设置的表单模型数据 | 1.0 |
公共方法
| 事件名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
| _setFormItem | 设置form中的键值 | (key, value);key:需要被设置的键，value：需要被设置的值 | 1.0 |
Table
属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| columns | 表格列的配置描述，具体项见下表 | array | - | 1.0 |
| pageSize | 页大小 | Number | 10 | 1.0 |
| total | 数据总数 | Number | 10 | 1.0 |
| isPagination | 是否需要分页 | Boolean | true | 1.0 |
| list | 数据数组 | Array | - | 1.0 |
回调事件
| 事件名称 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| pageChange | 分页事件触发 | Function(current) ；current：被选中的页码 | 1.0 |
公共方法
| 事件名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
| _startLoading | 开始页面加载中动画 | - | 1.0 |
| _stopLoading | 停止页面加载中动画 | - | 1.0 |
column
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 标题 | array | - | 1.0 |
| dataIndex | 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法 | string | - | 1.0 |
| align | 设置列内容的对齐方式 | 'left' | 'right' | 'center' | 'left' | 1.0 |
| customRender | 生成复杂数据的渲染函数，同AntDesign，dataIndex='index'，时， 该值默认为index + 1 | Function(text, record, index) {}|slot-scope | - | 1.0 |
| dataType | 数据展示类型 | TYPE_ENUM | TEXT | 1.0 |
| selectItems | 选择项数据 | [SelectItem] | - | 1.0 |
SelectItem
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| label | 显示内容 | String | Number | - | 1.0 |
| value | 唯一标识 | String | Number | - | 1.0 |
| disabled | 是否禁用 | String | Number | - | 1.0 |
UploadImg
属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| ref | 需被注册 | String | - | 1.0 |
| imgSize | 上传的数量 | String | '1' | 1.0 |
| accept | 上传的图片类型 | String | 'image/jpeg' | 1.0 |
公共方法
| 事件名称 | 说明 | 参数 | 版本 |
|---|---|---|---|
| _dataProcessing | 设置fileList中的键值 | {url:xxxxx} | 1.0 |
回调事件
| 事件名称 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| uploadSucc | 上传成功后或者删除成功后触发 | Function(info); info:fileList; fileList：返回的图片模型数据 | 1.0 |
1.0.4
4 years ago