更新日志

版本| 日期 | 组件 | 内容 |修改者 -|------------|---------------------------------------------|--------------------------------------------|- v0.1.18| 2025-08-22 | table-body | 判断表格复选框是否可选 |charon-npm v0.1.17| 2025-07-03 | table-header | fix |charon-npm v0.1.16| 2025-07-02 | table-body | fix |charon-npm v0.1.15| 2025-07-02 | table-body | 新增是否开启单选 |charon-npm v0.1.14| 2025-06-05 | cropper-image | 新增imgType参数 |charon-npm v0.1.13| 2025-06-05 | cropper-image | 新增maxSize参数 |charon-npm v0.1.12| 2025-05-19 | echarts | fix |charon-npm v0.1.11| 2025-04-27 | table-header | fix |charon-npm v0.1.10| 2025-04-10 | echarts | 新增setOptio方法参数 |charon-npm v0.1.9| 2025-04-09 | echarts | 新增echarts-liquidfill依赖 |charon-npm v0.1.8| 2025-03-17 | echarts | 销毁 |charon-npm v0.1.7| 2025-03-12 | attach-dialog | 新增视频预览 |charon-npm v0.1.6| 2025-01-22 | table-header | 版本升级 |charon-npm v0.1.5| 2025-01-08 | table-column | 新增slotProp属性 |charon-npm v0.1.4| 2025-01-07 | table-column | 新增slot属性 |charon-npm v0.1.3| 2025-01-02 | cropper-image | fix |charon-npm v0.1.2| 2025-01-02 | table-column | 修改sortable默认值 |charon-npm v0.1.1| 2025-01-02 | table-body、table-column | 新增排序自定义 |charon-npm v0.0.99| 2024-12-30 | attach-dialog | 新增downloadType |charon-npm v0.0.98| 2024-12-27 | table-body | 新增复选框默认选中方法 |charon-npm v0.0.97| 2024-12-24 | attach-dialog | 样式调整 |charon-npm v0.0.96| 2024-12-19 | table-header | 新增searchText |charon-npm v0.0.95| 2024-11-08 | cropper-image | 版本升级 |charon-npm v0.0.94| 2024-11-08 | vue-cropper | 版本升级 |charon-npm v0.0.93| 2024-11-08 | vue-cropper | 版本升级 |charon-npm v0.0.92| 2024-11-06 | vue-cropper | 版本升级 |charon-npm v0.0.91| 2024-11-05 | vue-cropper | 版本升级 |charon-npm v0.0.90| 2024-10-17 | operate-item | add otherFiles |charon-npm v0.0.89| 2024-10-17 | attach-dialog | add customClass |charon-npm v0.0.88| 2024-10-17 | operate-dialog | fix |charon-npm v0.0.87| 2024-10-17 | operate-dialog | fix |charon-npm v0.0.86| 2024-10-17 | operate-dialog | 将弹窗挂载在body下 |charon-npm v0.0.85| 2024-09-27 | attach-dialog、cropper-image | 新增customCropper自定义是否裁剪 |charon-npm v0.0.84| 2024-09-25 | fix | 修复部分bug |charon-npm v0.0.83| 2024-09-23 | fix | fix |charon-npm v0.0.82| 2024-09-18 | echarts | 修复部分bug |charon-npm v0.0.81| 2024-09-18 | table-body | 修复部分bug |charon-npm v0.0.80| 2024-09-18 | table-body | 新增序号宽度 |charon-npm v0.0.79| 2024-09-10 | attach-dialog | 修复部分bug |charon-npm v0.0.78| 2024-09-10 | attach-dialog | 修复部分bug |charon-npm v0.0.77| 2024-09-10 | attach-dialog | 修复部分bug |charon-npm v0.0.76| 2024-09-10 | attach-dialog | 新增cropperDialogOptions、cropperOptions |charon-npm v0.0.75| 2024-09-09 | cropper-image | 新增fixedBox、fixed |charon-npm v0.0.74| 2024-09-09 | cropper-image | 新增outputType导出图片格式 |charon-npm v0.0.73| 2024-09-09 | table-column | 新增scope.scope |charon-npm v0.0.72| 2024-09-09 | cropper-image | 新增enlarge图片根据截图框输出比例倍数 |charon-npm v0.0.71| 2024-09-03 | operate-dialog | 新增changeFullscreen方法 |charon-npm v0.0.70| 2024-08-30 | operate-dialog | 新增iconColor |charon-npm v0.0.69| 2024-08-30 | operate-dialog | 新增fullContent |charon-npm v0.0.68| 2024-08-28 | echarts | 新增echarts-liquidfill依赖 |charon-npm v0.0.67| 2024-08-28 | echarts | 新增部分参数 |charon-npm v0.0.66| 2024-08-27 | table-button、table-header、table-search-item | 修改主体颜色 |charon-npm v0.0.65| 2024-08-23 | table-button、table-header、table-search-item | 新增部分参数 |charon-npm v0.0.64| 2024-08-19 | web-uploader | 修复部分bug |charon-npm v0.0.63| 2024-08-19 | web-uploader | 修复部分bug |charon-npm v0.0.62| 2024-08-16 | web-uploader | 修复部分bug |charon-npm v0.0.61| 2024-08-16 | attach-dialog、web-uploader | 新增上大文件上传组件 |charon-npm v0.0.60| 2024-08-07 | attach-dialog | 新增上传文件限制大小 |charon-npm v0.0.59| 2024-07-26 | attach-dialog | 修改文档 |charon-npm v0.0.57| 2024-05-28 | attach-dialog | 隐藏列表删除 |charon-npm v0.0.56| 2024-05-27 | operate-dialog | 新增是否显示全屏按钮 |charon-npm v0.0.55| 2024-05-23 | attach-dialog | 修复上传bug |charon-npm v0.0.54| 2024-05-22 | attach-dialog | 新增是否显示上传按钮或者删除按钮属性 |charon-npm v0.0.53| 2024-05-22 | attach-dialog | 修复上传bug |charon-npm v0.0.52| 2024-05-15 | attach-dialog | 修复上传bug |charon-npm v0.0.51| 2024-05-15 | attach-dialog | 上传新增裁剪，裁剪默认只能传单张 |charon-npm v0.0.50| 2024-05-15 | operate-item | style属性改为styles |charon-npm v0.0.49| 2024-05-15 | cropper-image | 修改部分样式 |charon-npm v0.0.48| 2024-05-14 | cropper-image、operate-item | 优化cropper-image部分功能、新增operate-item的style属性 |charon-npm v0.0.47| 2024-05-09 | cropper-image | 优化部分功能 |charon-npm v0.0.46| 2024-05-09 | cropper-image | 新增图片裁剪组件 |charon-npm v0.0.45| 2024-04-08 | operate-item | 新增getTreesData方法，通过ref调用，获取树形的数据 |charon-npm v0.0.44| 2024-03-29 | attach-dialog | 可自定义附件预览数据格式化 |charon-npm v0.0.43| 2024-03-29 | attach-dialog | 删除附件预览限制 |charon-npm v0.0.42| 2024-03-27 | attach-dialog | 修复附件删除权限问题 |charon-npm v0.0.41| 2024-03-27 | operate-item | 新增getHalfCheckedKeys属性 |charon-npm v0.0.40| 2024-03-21 | table-body | 新增自定义行样式 |charon-npm v0.0.39| 2024-03-12 | upload-files | 修复已知问题 |charon-npm v0.0.38| 2024-03-05 | operate-dialog | 修复已知问题 |charon-npm v0.0.37| 2024-03-04 | operate-item | 修复已知问题 |charon-npm v0.0.36| 2024-02-29 | operate-dialog | 修复已知问题 |charon-npm v0.0.35| 2024-02-29 | operate-dialog | 新增drag属性 |charon-npm v0.0.34| 2024-02-28 | attach-dialog | 新增权限控制指令 |charon-npm v0.0.34| 2024-02-28 | table-body | 新增是否要高亮当前行 |charon-npm v0.0.33| 2024-02-26 | table-header | 新增删除添加按钮权限 |charon-npm v0.0.32| 2024-02-21 | echarts | 更新版本 |charon-npm v0.0.31| 2024-02-21 | echarts | 新增组件 |charon-npm v0.0.30| 2024-02-18 | table-search-item | 修复重置时，没法清空下拉选择远程搜索值 |charon-npm v0.0.29| 2024-02-18 | table-search-item、operate-item | 新增下拉选择远程搜索 |charon-npm v0.0.28| 2024-02-01 | attach-dialog | 新增上传给后台file字段 |charon-npm v0.0.27| 2024-02-01 | attach-dialog | 新增头部自定义颜色 |charon-npm v0.0.26| 2024-01-23 | table-header | 去掉更多搜索默认值 |charon-npm v0.0.25| 2024-01-23 | table-header | 调整更多搜索功能 |charon-npm v0.0.24| 2024-01-15 | table-header | 修复点击其他地方搜索仍然弹出 |charon-npm v0.0.23| 2024-01-15 | table-header | 补充表头搜索更多搜索进行筛选 |charon-npm v0.0.22| 2024-01-10 | table-body | 新增表格底部统计 |charon-npm v0.0.21| 2024-01-10 | operate-dialog | 新增保存和取消自定义文案 |charon-npm v0.0.20| 2024-01-05 | table-column | 新增merge多级表头参数 |charon-npm v0.0.19| 2023-12-28 | operate-item | 补充pickerOptions参数 |charon-npm v0.0.18| 2023-12-27 | -- | 优化文档 |charon-npm v0.0.17| 2023-12-26 | attach-dialog | 补充参数body，可在附件新增，查询自定义传参 |charon-npm v0.0.16| 2023-12-26 | operate-dialog | 补充参数overflowY，判断内容是否需要滚动 |charon-npm v0.0.15| 2023-12-21 | table-search-item | 补充默认插槽 |charon-npm v0.0.14| 2023-12-21 | operate-item | 修复附件删除不显示 |charon-npm v0.0.13| 2023-12-21 | operate-item | 优化附件是图片时候回显问题 |charon-npm v0.0.12| 2023-12-20 | table-body | 新增表格高度height参数 |charon-npm v0.0.11| 2023-12-20 | operate-dialog | 修改滚动条样式 |charon-npm v0.0.10| 2023-12-20 | operate-dialog | 修改部分样式 |charon-npm v0.0.9| 2023-12-20 | operate-dialog | 新增滚动到视图底部方法scrollToBottom |charon-npm v0.0.8| 2023-12-19 | operate-item | 新增自定义上传文件后回调方法，新增图片回显及预览 |charon-npm v0.0.7| 2023-12-13 | operate-dialog | 自定义底部操作按钮 |charon-npm v0.0.6| 2023-12-13 | operate-dialog | 新增当type==='other'时，内容的高度 |charon-npm v0.0.5| 2023-12-13 | operate-dialog | 调整弹窗底部提交按钮两种方式都可以显示或隐藏 |charon-npm v0.0.4| 2023-12-12 | table-search-item | 修复当type==='datetime'时，日期无法选择问题 |charon-npm v0.0.3| 2023-12-12 | operate-dialog | 调整operate-dialog中body自适应高度 |charon-npm v0.0.2| 2023-12-12 | operate-dialog | 新增外层class属性 |charon-npm

安装依赖

npm install general-components-default

在main.js中使用：

import 'general-components-default/lib/general-components-default.css'
import GeneralComponentsDefault from 'general-components-default'
Vue.use(GeneralComponentsDefault)

组件说明

table-header

Attributes

参数| 说明 | 类型 | 可选值 |默认值 -|----------------------------------------|---------|-----|- title| 模块标题 | String | -- |-- format| 不同的样式 | Number | 1/2 |1 addText| 新增文本 | String | -- |新增 deleteText| 删除文本 | String | -- |删除 search| 是否显示搜索 | Boolean | -- |true searchText| 搜索按钮文本 | String | -- |搜索 searchSubmit| 是否显示搜索按钮 | Boolean | -- |true resetSubmit| 是否显示重置按钮 | Boolean | -- |true addSubmit| 是否显示新增按钮 | Boolean | -- |true deleteSubmit| 是否显示删除按钮 | Boolean | -- |true searchDisabled| 搜索按钮禁用状态 | Boolean | -- |false resetDisabled| 重置按钮禁用状态 | Boolean | -- |false addDisabled| 新增按钮禁用状态 | Boolean | -- |false deleteDisabled| 删除按钮禁用状态 | Boolean | -- |false pageNum| 页码 | Number | -- |1 pageSize| 每页数量 | Number | -- |20 form| 表单 | Object | -- |-- filtrate| 更多搜索类型，值为1代表只显示或者隐藏和原来搜索条件并列，值为2代表弹窗搜索 | Number | 1/2 |null filtrateColor| filtrate值为2时，更多搜索按钮的背景颜色 | String | -- |#00b7ee addPermission| 新增自定义指令权限值 | String | -- |-- deletePermission| 删除自定义指令权限值 | String | -- |--

Events

事件名称|说明|回调参数 -|-|- search|用户点击搜索按钮时触发|-- add|用户点击新增按钮时触发|-- delete|用户点击删除按钮时触发|--

Slot

名称|说明 -|- appendSearBtn|自定义按钮，类似搜索、重置 button|自定义按钮，类似新增、删除 filtrate|存放更多搜索的内容

table-button

Attributes

参数|说明|类型|可选值|默认值 -|-|-|-|- format| 不同的样式 | Number | 1/2 |1 svgIcon|svg图标，需下载svg图标至svg-icon文件|String|--|-- type|按钮类型|String|primary/success/warning/danger|-- disabled|是否禁用|Boolean|--|false text|是否是文字按钮|Boolean|--|false

Events

事件名称|说明|回调参数 -|-|- click|用户点击按钮时触发|--

Slot

名称|说明 -|- --|按钮的文本

table-search-item

Attributes

参数| 说明 | 类型 |可选值|默认值 -|----------------------------------------|---------|-|- format| 不同的样式 | Number | 1/2 |1 type| 表单类型 | String |cascader/input/select/date/year/month/datetime/button|input v-model| 绑定值 | null |--|-- options| 数据源当type为cascader/select使用 | Array |--|[] props| 配置选项，参考element | Object |--|-- placeholder| 输入框占位文本 | String |--|-- clearable| 是否支持清空选项 | Boolean |--|true multiple| 是否支持多选type为select使用（远程搜索暂不支持多选） | Boolean |--|true valueFormat| 绑定值的格式 | String |--|-- buttonType| 按钮类型参考table-button中type | String |--|-- buttonText| 按钮文本 | String |--|-- buttonIcon| 按钮图标参考table-button中svgIcon | String |--|-- upload| type为button时使用，是否开启上传文件功能 | Boolean |--|false accept| 上传文件的类型 | String |--|image/* request| 当type为select，远程搜索接口函数，回调关键字（不为空开启远程搜索） | -- |--|null valueName| 当type为select时，默认回显值 | String |--|-- popperClass| 当type为select时，下拉框的类名 | String |--|-- filterable| 当type为select时，是否可搜索 | Boolean |--|true

Events

事件名称|说明|回调参数 -|-|- button|用户点击按钮时触发|upload为true回调上传的文件 getValue|获取绑定值|绑定值

Slot

名称|说明 -|- --|默认插槽 option|当type为select时，选项的作用域插槽v-slot:option="scope"，值为data

table-body

Attributes

参数| 说明 | 类型 |可选值|默认值 -|-------------------------------------------------------------------------------------------------------|---------------|-|- height| 表格高度如果height为空自动高度，如果 height 为 Number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值 | String、Number |--|100% border| 是否带边框 | Boolean |--|false idFields| 列表唯一标识字段 | String |--|id loading| 加载状态 | Boolean |--|false tableData| 显示的数据 | Array |--|[] selection| 是否显示复选框 | Boolean |--|true checkSelectable| 行复选框是否可选，checkSelectable(row, index) {return row.status === '可用'} | Function |--|null index| 是否显示序号 | Boolean |--|true pagination| 是否显示分页 | Boolean |--|true pageNum| 页码 | Number |--|1 pageSize| 每页数量 | Number |--|20 pageSizes| 每页显示个数选择器的选项设置 | Number[] |--|[20, 100, 300, 400] total| 总条数 | Number |--|-- pageCount| 页码按钮的数量，当总页数超过该值时会折叠 | Number |大于等于 5 且小于等于 21 的奇数|11 layout| 分页组件布局，子组件名用逗号分隔 | String |sizes, prev, pager, next, jumper, ->, total, slot|total, sizes, prev, pager, next, jumper props| 渲染嵌套数据的配置选项 | Object |--|-- selectionList| 复选框选中的数据集合 | Array |--|[] expandRowKeys| 树形表格展开的数据集合 | Array |--|[] mergeRows| 表格合并，例如：[{index: 1,fields: 'researchMatters'}]表示合并第二列字段为researchMatters的数据 | Array |--|[] summaryFields| 需要统计的字段，例如：:summary-fields="['electricEnergy']" 表示统计字段为researchMatters这一列 | Array |--|[] summaryTotalText| 底部统计文本 | String |--|合计 highlightCurrentRow| 是否要高亮当前行 | Boolean |--|false tableRowClassName| 自定义行样式方法，返回{row, rowIndex}，具体参考element | Null |--|null singleChoice| 是否开启单选 | Boolean |--|false selectedRowId| 单选的id | Null |--|null

Events

事件名称| 说明 |回调参数 -|----------------------|- search| 触发分页时搜索 |-- row-click| 点击当前行 |当前行数据 setChecked| 设置选中数据，传入当前需要选择的数据对象 |-- sortChange| 当表格的排序条件发生变化的时候会触发该事件 |{ column, prop, order }

Slot

名称|说明 -|- --|el-table-column组件位置

table-column

Attributes

参数| 说明 |类型|可选值|默认值 -|-------------------------------------------------------------------------|-|-|- prop| 对应列内容的字段名，也可以使用 property 属性,没有该参数则使用作用域插槽，支持a.b.c格式 |String|--|-- label| 显示的标题 |String|--|-- width| 对应列的宽度 |String|--|-- min-width| 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 |String|--|140 fixed| 列是否固定在左侧或者右侧，true 表示固定在左侧 |Boolean,String|true, left, right|-- show-overflow-tooltip| 当内容过长被隐藏时显示 tooltip |Boolean|--|true class-name| 列的 className |String|--|-- formatter| 用来格式化内容 |Function(row, column, cellValue, index)|--|-- highlight| 是否高亮显示文本 |Boolean|--|false merge| 是否是多级表头，用法参考element-ui |Boolean|--|false sortable| 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 |boolean, string|--|false slotProp| 存在prop时，自定义插槽数据 |boolean|--|false

Events

事件名称|说明|回调参数 -|-|- click|用户点击高亮文本时触发|对应行的数据

Slot

名称|说明 -|- --|作用域插槽参考el-table-column

table-status

Attributes

参数|说明|类型|可选值|默认值 -|-|-|-|- type|数据字典类型，为空则是后台配置的数据字典|String|--|-- value|值|Number|--|-- styles|type为空时赋值后台返回的样式|String|--|-- text|文字|String|--|--

operate-dialog

Attributes

参数| 说明 |类型|可选值|默认值 -|-----------------------------------------------------------|-|-|- type| 类型表单弹出或者常规弹窗 |String|form/other|form width| 弹窗宽度 |String|--|1000px title| 弹窗标题 |String|--|-- submitText| 保存文案 |String|--|保存 cancelText| 取消文案 |String|--|取消 visible| 是否显示 Dialog，支持 .sync 修饰符 |Boolean|--|false submitButton| 是否显示提交取消按钮 |Boolean|--|false customButton| 是否自定义底部按钮 |Boolean|--|false loading| 提交按钮加载状态 |Boolean|--|false disabled| 表单是否禁用 |Boolean|--|false customClass| 自定义Dialog类名 |String|--|-- form| 表单数据对象 |Object|--|-- labelWidth| 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto |String|--|-- minHeight| 当type='other'时，内容的最小高度 |String|--|50vh height| 当type='other'时，内容的高度 |String|--|-- headerBg| 头部背景颜色 |String|--|#00b7ee overflowY| 内容是否滚动 |Boolean|--|true drag| 是否可以拖动 |Boolean|--|true showFullscreen| 是否显示全屏按钮 |Boolean|--|true fullContent| 内容是全量显示 |Boolean|--|false iconColor| 右上角关闭，全屏颜色 |String|--|#ffffff

Events

事件名称| 说明 |回调参数 -|------------------|- submit| 用户点击提交时触发 |-- closed| 关闭弹窗时触发 |-- scrollToBottom| 滚动到视图底部，过ref进行触发 |-- changeFullscreen| 放大缩小事件 |是否放大或者缩小

Slot

名称|说明 -|- --|默认插槽 others|挂载在弹窗以外的组件，通常也是全局弹窗绝对定位 customButton|自定底部按钮

operate-item

Attributes

参数| 说明 | 类型 |可选值|默认值 -|------------------------------------------------------|----------|-|- type| 类型 | String |input/cascaderLazy/cascader/select/textarea/tree/upload/datetime/date/time/year/month|-- prop| 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | String |传入 Form 组件的 model 中的字段|-- label| 标签文本 | String |--|-- style| el-form-item组件的样式 | Object |--|{} placeholder| 占位符 | String |--|-- value| 绑定值 | Boolean |--|false valueName| type为cascaderLazy显示的文字 | String |--|-- rules| 校验规则 | Function |--|-- width| 所占的宽度，单位% | Number |--|50 required| 是否必填 | Boolean |--|false disabled| 是否禁用 | Boolean |--|false options| 数据源 | Array |--|-- props| 参考element | Object |--|-- showAllLevels| 输入框中是否显示选中值的完整路径 | Boolean |--|false clearable| 是否支持清空选项 | Boolean |--|true multiple| 是否多选 | Boolean |--|false currentId| type为cascaderLazy选中当前项的id | Null |--|-- accept| 上传文件的类型 | String |--|image/* isRange| 日期选择时是否开启范围 | Boolean |--|false rangeSeparator| 选择范围时的分隔符 | String |--|至 startPlaceholder| 范围选择时开始日期的占位内容 | String |--|-- endPlaceholder| 范围选择时开始日期的占位内容 | String |--|-- valueFormat| 绑定值的格式 | String |--|-- method| 自定义上传文件后回调 | null |--|-- pickerOptions| 时间日期选择器特有的参数，参考element | Object |--|{} request| 当type为select，远程搜索接口函数，回调关键字（不为空开启远程搜索） | -- |--|null valueName| 当type为select时，默认回显值 | String |--|-- popperClass| 当type为select时，下拉框的类名 | String |--|-- filterable| 当type为select时，是否可搜索 | Boolean |--|true getHalfCheckedKeys| 当type为tree时，返回值是否包含半选 | Boolean |--|false

Events

事件名称| 说明 |回调参数 -|----------------------------|- changValue| 绑定值改变时触发 |绑定的值 data| 自定义上传文件后回调 |回调的data值 getTreesData| 当type为tree时，通过ref调用 |选择的树形的数据

Slot

名称|说明 -|- --|默认插槽位置 option|当type为select时，选项的作用域插槽v-slot:option="scope"，值为data otherFiles|当type=upload时，其他附件显示操作

attach-dialog

Attributes

参数| 说明 | 类型 | 可选值 |默认值 -|-----------------------|---------|---------|- title| 弹窗标题 | String | -- |-- id| 附件所属id | String | -- |-- accept| 上传文件的类型 | String | -- |image/* multiple| 上传文件是否多选 | Boolean | -- |false visible| 弹窗显隐控制 | Boolean | -- |false body| 参数body，可在附件新增，查询自定义传参 | Object | -- |{} headerBg| 头部背景颜色 | String | -- |#00b7ee fileFields| 上传后台的字段 | String | -- |file addPermission| 新增自定义指令权限值 | String | -- |-- deletePermission| 删除自定义指令权限值 | String | -- |-- previewPermission| 预览自定义指令权限值 | String | -- |-- downloadPermission| 下载自定义指令权限值 | String | -- |-- previewFormat| 预览附件数据data进行格式化方法 | null | -- |-- width| 裁剪后的宽度 | Number | -- |500 height| 裁剪后的高度 | Number | -- |300 cropper| 是否需要裁剪 | Boolean | -- |false cropperDialogOptions| 裁剪弹窗参数 | Object | -- | 参考下面示例 cropperOptions| 裁剪参数包含 | Object | -- |参考下面示例 addSubmit| 是否显示上传按钮 | Boolean | -- |true deleteSubmit| 是否显示删除按钮 | Boolean | -- |true maxSize| 上传文件大小限制，单位M | Number | -- |null maxSizeMsg| 限制大小提示内容 | String | -- |-- largeFile| 是否开启大文件上传 | String | -- |-- customCropper| 是否裁剪判断 | Boolean | -- |false customClass| 自定义弹窗类名 | String | -- |-- downloadType| 下载类型文件流下载或者地址直接打开下载 | String | blob/-- |--

// 示例
cropperDialogOptions = {
    headerBg: '',
    width: '',
    submitText: '',
    cancelText: '',
    title: '',
    minHeight: '',
    maxHeight: '',
    height: '',
    overflowY: '',
    drag: '',
    showFullscreen: '',
    fullContent: '',
    iconColor: '',
}
cropperOptions = {
    img: '',
    width: '',
    height: '',
}

Events

事件名称| 说明 |回调参数 -|--------------------------|- onLoading| 上传状态，true：上传中 false：上传完成 |true or false onSuccess| 上传成功回调 |response onError| 上传失败回调 |response getLargeFile| 开启大文件上传时，上上传按钮触发事件 |-- uploadFilesClick| 自定触发上传指令，通过ref触发 |--

Slot

名称|说明 -|- --|--

upload-files

Attributes

参数|说明|类型|可选值|默认值 -|-|-|-|- accept|上传文件的类型|String|--|image/* multiple|上传文件是否多选|Boolean|--|false

Events

事件名称|说明|回调参数 -|-|- uploadFilesClick|通过ref触发|--- getFiles|选完文件触发|选完的文件数组

Slot

名称|说明 -|- --|--

vue-scroll

Attributes

参数| 说明 |类型|可选值|默认值 -|----------|-|-|- overflowX| 是否开启横向滚动 |Boolean|--|false overflowY| 是否开启纵向滚动 |Boolean|--|false

Events

事件名称| 说明 |回调参数 -|-----------------|- getPosition| 通过ref触发获取当前滚动距离 |滚动距离

Slot

名称|说明 -|- --|--

echarts

Attributes

参数| 说明 |类型|可选值|默认值 -|-------|-|-|- className| 自定义类名 |String|--|--

Events

事件名称| 说明 |回调参数 -|------------------|- setOption| 通过ref触发设置配置参数 |-- getEcharts| 通过ref触发获取echarts |echarts

Slot

名称|说明 -|- --|--

<echarts ref="demo"/>
this.$refs['demo'].setOption(option)

cropper-image（暂不支持回显）

Attributes

参数| 说明 |类型|可选值|默认值 -|---------------------------------------|-|-|- promptText| 文字提示 |String|--|上传图片 elWidth| 显示在表单里的宽度 |Number|--|150 elHeight| 显示在表单里的高度 |Number|--|90 width| 裁剪宽度 |Number|--|500 height| 裁剪高度 |Number|--|300 cropper| 是否需要裁剪 |Boolean|--|false readonly| 是否只读 |Boolean|--|false multiple| 是否多选，多选时样式底部自动加边距，请自行删除原有样式 |Boolean|--|false max| 多选时，最多能上传几张 |Number|--|5 themeColor| 主题颜色 |String|--|#00b7ee tips| 建议的图片大小文字，例如：最佳尺寸：600*360 ，支持JPG、PNG。 |String|--|-- customCropper| 是否裁剪判断 | Boolean |--|false maxSize| 上传大小限制 | Number |--|5 imgType| 上传文件类型，逗号隔开 | String |--|jpeg,jpg,png,gif,webp

Events

事件名称| 说明 |回调参数 -|----------|- resultImage| 裁剪完后回调方法 | 裁剪后的图片

Slot

名称|说明 -|- --|--

web-uploader

Attributes

参数| 说明 |类型|可选值|默认值 -|------------------------------------------------------------------------------|-|-|- auto| 设置是否自动上传文件。‌如果设置为true，‌用户选择文件后，‌文件会立即开始上传；‌如果设置为false，‌则需要手动调用文件上传方法才能触发文件上传 |Boolean|--|false multiple| 是否开启多选 |Boolean|--|false server| 文件上传的服务器地址 |String|--|-- formData| 文件上传请求的参数表，每次发送都会发送此对象中的参数 |Object|--|{} chunked| 是否开启分片上传 |Boolean|--|true chunkSize| 分片上传，每个分片的大小，单位B |Number|--|5 * 1024 * 1024 threads| 同时上传文件的数量 |Number|--|5 duplicate| 是否允许选择重复文件 |Boolean|--|false fileSizeLimit| 文件总大小限制, 超出则不允许加入队列，单位B |Number|--|100 * 1024 * 1024 * 1024 fileSingleSizeLimit| 单个文件大小是否超出限制, 超出则不允许加入队列，单位B |Number|--|100 * 1024 * 1024 * 1024 accept| 上传文件类型限制 |String|--|-- fileCheck| 检验文件是否已经上传接口 |Function|--|null fileMerge| 合并文件接口 |Function|--|null sortId| 普通业务分类id |null|--|null assocId| 业务关联id |null|--|null

Events

事件名称| 说明 |回调参数 -|-------------------------------------------|- uploadFile| 通过ref触发web-uploader组件，上传文件 |-- getFileListData| 获取文件信息包括进度 |上传的文件信息 successMerge| 上传文件并且合并成功 |文件id和文件名称 uploadStarted| 文件开始上传 |-- uploadFinished| 所有文件上传成功 |-- removeFile| 通过ref触发web-uploader组件，传入对应的文件id删除对应文件 |-- upload| 通过ref触发web-uploader组件，开始上传，当auto为false时使用 |-- stop| 通过ref触发web-uploader组件，停止上传 |--

Slot

名称|说明 -|- --|--

cropperjs

Attributes

参数| 说明 |类型|可选值|默认值 -|---------------------------------------|-|-|- img| 图片路径 |String|--|-- outType| 导出图片类型 |String|--|jpeg initialAspectRatio| 裁剪长宽比 |Number|--|1

Events

事件名称| 说明 |回调参数 -|-------------------------|- reset| 重置裁剪信息，通过refs调用 | -- setData| 设置裁剪信息，通过refs调用 | -- getCroppedCanvas| 获取裁剪后的内容（blob，通过refs调用） | --

Slot

名称|说明 -|- --|--