“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
此组件主要用于vue项目内签字手写功能，可显示缩小版，全屏版两种类型，三种笔画颜色可选择，手写完成可获取手写结果。点击“重写”，会清空手写板内容； 点击“完成”，会将手写板内容生成图片，此时，不可以再进行手写操作，点击重写可重新进行手写，可以在此方法中获取生成的图片信息；点击“横版/返回”，可以进行手写板缩小版和全屏版模式切换。示例图片：此组件主要用于vue项目内签字手写功能，可显示缩小版，全屏版两种类型，三种笔画颜色可选择，手写完成可获取手写结果。点击“重写”，会清空手写板内容； 点击“完成”，会将手写板内容生成图片，此时，不可以再进行手写操作，点击重写可重新进行手写，可以在此方法中获取生成的图片信息；点击“横版/返回”，可以进行手写板缩小版和全屏版模式切换。
refs.boardCanvas.toDataURL(); this.$emit("onComplete", this.filePath); // 将生成的图片传给父组件 }, /* * 点击“横版”“返回”,如果当前是缩小版，改为横版，否则返回为缩小版 * 清空画板内容 */ clickOrientation() { if (this.direction === "horizontal") { this.direction = ""; } else { this.direction = "horizontal"; } // 清空画板内容后后修改样式, 重置canvas this.clickReset(); } }};.board-box { width: 100%; height: 112px; border: 1px solid #fbd3de; border-radius: 10px; overflow: hidden; box-sizing: border-box; canvas, img { width: 100%; height: 100%; }}.handle-box { padding: 6px 0px; display: flex; justify-content: flex-end; align-items: center; .color-box { display: flex; .color-item { width: 25px; height: 25px; border-radius: 50%; margin: 0px 5px; transition: 0.3s; &.active { position: relative; transform: scale(0.8); &::after { content: ""; position: absolute; width: 100%; height: 100%; border: 1px solid #ccc; border-radius: 50%; transform: scale(1.25); box-sizing: border-box; } } } } button { font-size: 10px; width: 40px; height: 20px; padding: 0; border-radius: 3px; color: #666; margin-left: 10px; border: 1px solid #ececec; outline: none; background: #fff; &:active { background: #ececec; } }}// 水平状态样式.horizontal { width: 100vw; height: 100vh; position: absolute; top: 0px; left: 0px; background: #ffffff; display: flex; align-items: center; flex-flow: row-reverse; .board-box { width: calc(~"100% - 100px"); height: 90vh; } .handle-box { height: 90vh; width: 25px; flex-direction: column; padding: 0px 10px; .color-box { flex-direction: column; .color-item { margin: 10px 0px; } } button { transform: rotate(90deg); margin: 40px 0px 10px; } }}
