vue-esign 签字组件

1、安装

npm install vue-esign --save

2、引入

// main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3、参数

4、完整代码

<template>
  <div class="content">
    <el-button @click="handleClear">清空el-button>
    <el-button @click="handleSubmit">提交el-button>
    <vue-esign ref="esign" :width="600" :height="300" :lineWidth="6"
      bgColor="#e6f7ff" :isClearBgColor="false" />
  div>
template>
 
<script>
  export default {
    name: 'test',
    methods: {
      // 清空画布
      handleClear() {
        this.$refs.esign.reset()
      },
      // 生成图片提交
      async handleSubmit() {
        let base64Url = await this.getSignUrl(this.$refs.esign)
        if (!base64Url) {
          return this.$message.warning('请先签字')
        }
        // todo提交表单
        this.$message.success('提交成功')
      },
      // 签字转为base64图片
      getSignUrl(refs) {
        return new Promise((resolve, reject) => {
          refs.generate().then(res => {
            resolve(res)
          }).catch(err => {
            resolve('')
          })
        })
      }
    }
  }
script>
 
<style lang="scss" scoped>
style>