问题形容
在咱们开发我的项目中，特地是流程审批类的我的项目，最初一步会提交审核，审核员看完相应信息当前，没问题就会签字通过审批。所以就要用到本篇文章中的vue-esign签字技术。
vue-esign技术是基于html5代新个性，canvas技术进行的组件化封装，在那个页面须要用到签字技术，只须要引入vue-esign组件即可。这个组件其实也是能够了解为是一个插件。本篇文章记录一下这个插件的用法，忘了的时候回来看看。咱们先看一下最终的demo效果图
vue-esign效果图
左边控制台输出的就是生成的签名画布图片转成base64格局的图片信息
应用步骤
第一步，下载并注册vue-esign插件
下载：cnpm i vue-esign --save
main.js中引入并注册这个插件：
import vueEsign from 'vue-esign'Vue.use(vueEsign);第二步，应用vue-esign插件
<template> <div id="app"> <!-- 做应用el-dialog做签字的弹框 --> <el-dialog title="签字" :visible.sync="dialogVisible" width="800px" append-to-body> <!-- 应用这个签名组件 --> <vue-esign ref="esign" class="mySign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> <span slot="footer" class="dialog-footer"> <el-button @click="handleGenerate" type="primary">生成签字图片</el-button> <el-button @click="handleReset">清空画板</el-button> <el-button @click="dialogVisible = false">勾销</el-button> </span> </el-dialog> <!-- 审查人点击确认签字按钮触发签字 --> <div class="checkMan"> <h2>审查人</h2> <el-button plain @click="dialogVisible = true" type="primary">点击签字</el-button> <!-- 用户用来预览签字图片的中央 --> <img :src="resultImg" alt="" /> </div> </div></template><script>export default { name: "App", data() { return { dialogVisible: false, // 弹框是否开启 lineWidth: 6, // 画笔的线条粗细 lineColor: "#000000", // 画笔的色彩 bgColor: "", // 画布的背景色彩 resultImg: "", // 最终画布生成的base64图片 isCrop: false, // 是否裁剪，在画布设定尺寸根底上裁掉周围空白局部 }; }, methods: { // 清空画板 handleReset() { this.$refs.esign.reset(); }, // 生成签字图 handleGenerate() { this.$refs.esign .generate() // 应用生成器调用把签字的图片转换成为base64图片格式 .then((res) => { this.resultImg = res; }) .catch((err) => { // 画布没有签字时会执行这里提醒一下 this.$message({ type: "warning", message: "请签名后再生成签字图片", }); }); // 在这里向后端发申请把转换后的base64文件传给后端，后端接管当前再转换成图片做动态图片存储 // 当然也能够把base64转成流文件blob格局的，相似上传给后端这样，具体哪种形式看后端要求 setTimeout(() => { // 这里要应用定时器略微延后当前就能取到base64数据了，当然也能够再加一个确认按钮，如：确认应用这张base64签名图片 // 点击确认当前，在其回调函数中，再把base64的签名图片传给后端用于存储 console.log('我是签字后的base64图片',this.resultImg); }, 200); this.dialogVisible = false; }, },};</script><style lang="less" scoped>#app { width: 100%; height: 100%; padding: 60px; .checkMan { width: 400px; height: 360px; text-align: center; border: 1px solid #e9e9e9; padding-top: 40px; h2 { margin-bottom: 20px; } .el-button { margin-bottom: 20px; } img { width: 100%; height: 200px; } }}/deep/ .el-dialog__body { // 设置一下签字区域的虚线边框 .mySign { border: 1px dashed #000; }}</style>其实用法也很简略，细节的正文写在代码外面了。记录一下
最初附上官网的npmjs文档链接解说，传送门如下：
https://www.npmjs.com/package...