vue 优雅写法(使用vue实现手写签名功能)
类别:编程学习 浏览量:787
时间:2021-10-07 00:34:51 vue 优雅写法
使用vue实现手写签名功能个人实现截图:
安装:
npm install vue-esign --save
使用:
1.在main.js中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
2.在页面中引用
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> <button @click="handleReset">清空画板</button> <button @click="handleGenerate">生成图片</button>
3.说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | Number | 800 | 画布宽度,即导出图片的宽度 |
height | Number | 300 | 画布高度,即导出图片的高度 |
lineWidth | 4 | Number | 画笔粗细 |
lineColor | String | #000000 | 画笔颜色 |
bgColor | String | 空 | 画布背景色,为空时画布背景透明, 支持多种格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0,0,0,.6)','red' |
isCrop | Boolean | false | 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分 |
期待已久,上原码:
data () { return { lineWidth: 6, lineColor: '#000000', bgColor: '', resultImg: '', isCrop: false } }, methods: { handleReset () { this.$refs['esign'].reset() //清空画布 }, handleGenerate () { this.$refs['esign'].generate().then(res => { this.resultImg = res // 得到了签字生成的base64图片 }).catch(err => { // 没有签名,点击生成图片时调用 this.$message({ message: err + ' 未签名!', type: 'warning' }) alert(err) // 画布没有签字时会执行这里 'Not Signned' }) } }
附:将base64转化成图片方法:
// 将base64,转换成图片 base64ImgtoFile(dataurl, filename = 'file') { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const suffix = mime.split('/')[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) },
到此这篇关于使用vue实现手写签名功能的文章就介绍到这了,更多相关vue实现手写签名内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vuetable表格合并(vue-table实现添加和删除)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue验证码(vue_drf实现短信验证码)
- vue 排班安排(vue实现钉钉的考勤日历)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
热门推荐
- nginx 反向代理详细配置(nginx反向代理配置去除前缀案例教程)
- react初学难点(使用react的7个避坑案例小结)
- MySql 中IFNULL、ISNULL和NULLIF
- access区分登录身份的代码(妙用.htaccess隐藏网页文件扩展名)
- python旅游(详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?)
- cssborder三角形怎么画(使用CSS的border属性绘制各种几何形状的方法)
- js分号的使用
- 做网站是使用nginx还是apache(web服务器软件Apache与Nginx的对比分析)
- linuxcrontab怎么不执行(Linux crontab 命令的使用)
- php中变量定义规则(PHP中__set实例用法和基础讲解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9