乐趣区

关于vue.js:vueesign签字板的使用步骤小demo

jiezi

问题形容

在咱们开发我的项目中，特地是流程审批类的我的项目，最初一步会提交审核，审核员看完相应信息当前，没问题就会签字通过审批。所以就要用到本篇文章中的 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…

退出移动版