0.1.2 • Published 9 months ago
bis_drawing_board v0.1.2
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 区域 |