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加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue界面自动生成(Vue中实现3D标签云的详细代码)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue树形表格内容太长(VUE 无限层级树形数据结构显示的实现)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- mongovue的使用
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
热门推荐
- html markdown 超链接对比(html+js 实现markdown编辑器效果)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- docker-compose查看服务状态(Docker+DockerCompose封装web应用的方法步骤)
- 香港云服务器怎么那么火(如何选择便宜稳定的香港云服务器?)
- php性能优化的思路和步骤(FastCGI轻松搞定IIS7.5+PHP5.6.0环境)
- oracle中rownum和row_number()
- SQL语句中单引号
- dedecms如何使用标签(DEDECMS副栏目代码)
- php框架初始化教程学习(PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解)
- php优势和缺点(PHP的介绍以及优势详细分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9