0.1.6 • Published 2 years ago
icon_tool v0.1.6
icon_tool 组件
功能：
左边编辑区（画布），右边图标区（工具栏）； 从工具栏拖拽图标至画布，画布区域图标可以旋转、拉伸、拖拽； 有 ctrl+z(command+z)撤销功能； 新创建的图标会覆盖原先创建的图标，但是图标空隙部份是透明的，效果不明显。
用法：
通过 Vue.use()安装组件
import icon_tool from "icon_tool"
Vue.use(icon_tool)图标则需要引入自定义的图标 css 文件，将图标类形成数组以 iconList 参数传给 IconTool 组件。
注意 组件使用到了 element-ui 的部分图标，需要引入 element-ui 的样式库，否则会导致图标的显示错误。 如果你安装了 element-ui 组件库，则需要：
import "element-ui/lib/theme-chalk/index.css"本组件也上传了 element-ui 的图标样式库，如果你未安装 element-ui 组件库，则可以：
import "icon_tool/lib/icon.css"属性：
IconTool 标签
整合画布和工具栏，具有完整功能。
参数
插槽
| 名称 | 说明 |
|---|---|
| menu | 工具栏中的自定义菜单栏 |
IconList 标签
工具栏。
参数
| 名称 | 是否必要 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
| array | true | Array | / | 图标类数组 |
| iconSize | false | Number | 50 | 图标大小，单位为 px，最小 16 |
事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| dragEnd | 拖拽结束时触发的函数 | 两个参数，第一个是一个 String，为拖动的图标名；第二个是一个 Object，为拖动结束时鼠标的坐标 |
SingleIcon 标签
画布中单个图标，有旋转、缩放、拖拽的功能。
参数
| 名称 | 是否必要 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
| iconInfo | true | Object | / | 图标信息，需要 id、name（类名）、isFocus（用于选中图标）、location（图标中心的位置）。 |
| border | false | Object/DOMRect | {left: 0,top: 0,right: 1920,bottom: 1080,} | 图标能够操作的边界 |
| iconSize | false | Number | 70 | 图标大小，单位为 px，注意要在原图标大小上加 20 |
| zoom | false | Boolean | true | 开启图标缩放功能 |
| spin | false | Boolean | true | 开启旋转功能 |
事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| delete | 点击删除按钮、点击键盘 delete 或退格键触发 | Object，记录删除前图标状态 |
| change | 旋转、缩放、拖动开始时触发 | Object，记录操作变更前状态 |
问题：
现发现撤销功能可能与浏览器快捷键冲突（mac 端） 工具栏放左边时可能有拖动的动画 bug，但是不妨碍功能的正常使用