移动端手写签名提交后台 vue-esign插件实现

记录一下开发中问题

一、安装vue-esign

cnpm i vue-esign --save
// 如果没有下载cnpm就用npm

二、引入vue-esign

// 生成签名插件 
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

三、写一个组件可以方便以后公用 命名为signature.vue

// 在components下新建组件 signature.vue 
<template>
  <div>
    <van-nav-bar :title="title" left-text="取消签名" left-arrow @click-left="closeDialog" :fixed="true" :placeholder="true" class="nav-bar" />
    <div class="canvaspanel">
      <div class="canvasborder">
        <vue-esign ref="esign" :width="530" :height="1080" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      </div>
      <div class="buttongroup">
        <van-button type="primary" @click="handleReset" class="empty">清空</van-button>
        <van-button type="primary" @click="handleGenerate" class="autograph">确定</van-button>
      </div>
    </div>
    <img :src="resultImg" alt="" v-show="false">
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name: 'esign',
  components: {
 
  },
  data () {
    return {
      title: '手写签名',
      lineWidth: 10,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset () {
      this.$refs.esign.reset()
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        this.$emit('close', this.resultImg)
      }).catch(err => {
        Toast.fail('请签名')
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    closeDialog () {
      this.resultImg = ''
      this.$emit('close', this.resultImg)
    }
  }
}
</script>
<style  lang="less" scope>
.canvasborder {
  border: solid 1px #ccc;
}
.canvaspanel {
  position: relative;
}
 
.buttongroup {
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0deg);
    margin-top: 10px;
  }
 
.autograph {
  margin-left: 20px;
}
</style>

四、引入组件，使用组件

 // 1.引入组件
import signCanvas from '@/components/signature.vue'
// 2.注册组件
components: {
    signCanvas
},
// 3.使用组件
// 通过vant的popup来控制显示隐藏showqm在data中定义
<van-popup :style="{ height: '100%' }" v-model="showqm" get-container="body" position="bottom">
      <signCanvas @close="closeDialog">
      </signCanvas>
</van-popup>
// 4.写签名完毕确认的方法
methods: {
    closeDialog (e) {
      // 签名赋值 这里的e就是base64了，直接使用
      this.baseinfo.qm = e
      // 关闭签名框
      this.showqm = false
      // 签名完毕，提交数据（就不展示了）
      this.submitQuestionare()
},