vab 内置组件用法
gitcx
# vab-count 用法
第 1 步：安装依赖
# 旧版本
npm i zx-count -S --registry=https://registry.npm.taobao.org
# 新版本
npm i vab-count -S --registry=https://registry.npm.taobao.org
第 2 步：导出组件
示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
第 3 步：使用 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| startVal | 起始值 | Number | 0 |
| endVal | 最终值 | Number | 2017 |
| duration | 持续时间（毫秒） | Number | 3000 |
| autoplay | 自动播放 | Boolean | true |
| decimals | 小数位数 | Number | 0 |
| separator | 分隔符 | String | , |
| prefix | 前缀 | String | '' |
| suffix | 后缀 | String | '' |
# vab-echarts 用法（2021 年废弃）
注意 2021 年后的版本 vue-echarts 已发生天翻地覆的变化，需自行查阅 vue-echarts 官网（或者使用我们封装好的版本），精简版本建议去 master 拷贝示例
第 1 步：安装依赖
# 旧版本
npm i echarts vue-echarts -S --registry=https://registry.npm.taobao.org
# 新版本无需下载
第 2 步：新建主题文件src/extra/vab-echarts-theme.json 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
第 3 步：导出组件 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
第 4 步：使用 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| initOptions | 用来初始化 ECharts 实例 | Object | |
| theme | 当前 ECharts 实例使用的主题 | String | |
| options | ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 setOption 方法 | Object | |
| autoresize | 这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘 | Boolean | false |
# vab-player 用法
第 1 步：安装依赖
# 旧版本
npm i zx-player -S --registry=https://registry.npm.taobao.org
# 新版本
npm i vab-player -S --registry=https://registry.npm.taobao.org
第 2 步：导出组件 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window)
第 4 步：使用 示例代码（需要登录 Pro 版购买时绑定的 github 账号） (opens new window) 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| id | 用来初始化 zx-player | String | 32 位随机 id |
| url | 支持 mp4、hls（msu8）、flv | String | |
| volume | 音量 | Int | 1 |
| autoplay | 自动播放 | Boolean | false |
| pip | 画中画 | Boolean | true |
| loop | 循环播放 | Boolean | false |
| screenShot | 截图 | Boolean | false |
# vab-icon 用法
第 1 步 打开https://chu1204505056.gitee.io/admin-pro/#/vab/icon/remixIcon (opens new window)选择自己喜欢的组件即可复制源码，如：
属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| icon（1.9 版本之前为 icon-class 字段） | 图标名称（此时默认使用内置 字体图标） | String | |
| isDefaultSvg | 是否是默认 svg 图标（此时默认使用内置 svg） | Boolean | false |
| isCustomSvg | 是否是自定义 svg 图标（此时默认使用内置你存储到src/icon下的 svg 图标） | Boolean | false |
# vab-quill 用法
官方文档地址 https://www.kancloud.cn/liuwave/quill/1409423 (opens new window)
基于 quill 开发，详见 https://github.com/vue-admin-beautiful/admin-pro/blob/dev/src/views/vab/editor/richTextEditor.vue (opens new window)
如果需要调用底层方法，详见 quill 官方文档，调用方法如下
// 仅支持Pro版本 Plus版本暂不支持
this.$nextTick(() => {
//用法 this.$refs["vab-quill"].Quill.quill的底层的方法;
this.$refs["vab-quill"].Quill.getLength();
});
# vab-cropper 用法（版本 > 0.02）
options 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| width | 宽度 | Int | |
| height | 高度 | Int | |
| aspectRatio | 裁剪的宽高比（支持 1、16/9、18/10 等任意尺寸） | Int | 1 |
# logic-flow 流程图组件
官方文档地址logic-flow (opens new window)
# vab-draggable 拖拽组件
官方文档地址vuedraggable (opens new window)
# vab-qr 二维码组件
| Parameter | Explanation |
|---|---|
| text | Contents to encode. 欲编码的内容 |
| correctLevel | Correct Level 0-3 容错级别 0-3 |
| size | Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距 |
| margin | Margin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px |
| colorDark | Color of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色 |
| colorLight | Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色 |
| components | Controls the appearances of parts in the QR code. Read section ComponentOptions to learn more. 阅读 ComponentOptions 了解更多信息。 |
| bgSrc | Background url to embed in the QR code. 欲嵌入的背景图地址 |
| gifBgSrc | Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 |
| backgroundColor | Background color 背景色 |
| backgroundDimming | Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助 |
| logoSrc | Logo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址 |
| logoScale | Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2margin). Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2*margin), 默认 0.2 |
| logoMargin | White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为 0 |
| logoBackgroundColor | Logo background color, need set logo margin. Logo 背景色,需要设置 logo margin |
| logoCornerRadius | Radius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为 0 |
| whiteMargin | If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框 |
| dotScale | Value used to scale down the data dots' size. (0 < scale < 1.0) default 1 数据区域点缩小比例,默认为 1 |
| autoColor | If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true |
| binarize | If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值 |
| binarizeThreshold | Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255) 二值化处理的阈值 |
| callback | Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 |
| bindElement | If set to true, the generated QR will bind to a HTML element automatically. Default is true. 指定是否需要自动将生成的二维码绑定到 HTML 上, 默认是 true |