drawing_board 组件

Vue2 组件

功能

上方 Header 部分是菜单栏，下面 Main 部分是一个画板，最下方 Footer 部分为自定义区域； 有选择画笔、橡皮，选择画笔尺寸和颜色功能； 有撤销、清空、下载功能。

用法

通过 npm 下载包

npm install bis_drawing_board

通过 Vue.use()安装组件

import bis_drawing_board from "bis_drawing_board"
Vue.use(bis_drawing_board)

属性：

DrawingBoard

整个组件。

参数

| 名称 | 是否必要 | 类型 | 默认值 | 说明 | | --------- | -------- | ------- | ----------- | -------------------------------------------------------------- | | theme | false | String | "lightblue" | 设置主题 background 样式，需要与 css background 的内容格式相同 | | typeBtn | false | Boolean | true | 开启更改画笔功能 | | eraserBtn | false | Boolean | true | 开启橡皮按钮 | | colorBtn | false | Boolean | true | 开启选择颜色功能 |

事件

| 名称 | 说明 | 回调参数 | | ------- | ------------------ | ------------------- | | drawEnd | 结束一笔绘画时触发 | 结束时的 mouseEvent | | cancel | 撤销后触发 | / | | reset | 清空后触发 | / | | save | 下载后触发 | / |

插槽

| 名称 | 说明 | | ------ | ------------------ | | footer | 自定义 footer 区域 |