特意封装成了一个组件，签名之后会生成一张图片
signBoard.vue

<template><el-drawer title="签名" :visible.sync="isShowBoard" append-to-body :show-close="false" :before-close="closeBoard" size="50%" @close="closeBoard"><div class="drawer-body"><el-row v-loading="loading"><vue-sign ref="esign" :width="800" :height="300" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" /><button class="mt20" @click="handleReset">清空画板</button></el-row></div><div class="drawer-footer"><el-button @click="closeBoard">关 闭</el-button><el-button type="primary" :loading="loading" @click="handleSign">签 名</el-button></div></el-drawer></template><script>
import vueSign from 'vue-esign'
import oss from '@/utils/oss'
const baseUrl = process.env.VUE_APP_OSS_URL
export default {components: { vueSign },props: {folder: {type: String,default: ''},isShowBoard: {type: Boolean,default: false},loading: {type: Boolean,default: false}},data() {return {lineWidth: 6,lineColor: '#000000',bgColor: '#eee',fileList: [],signSrc: '',isCrop: false}},methods: {handleReset() {this.$refs.esign.reset()this.$refs.esign.$el.style.background = '#eee'},async handleGenerate() {try {const res = await this.$refs.esign.generate()//服务器上传const result = await oss.dataURLtoFile(res, this.folder)this.signSrc = baseUrl + '' + result.fileUrlthis.$emit('sign', this.signSrc)} catch (e) {this.$message.error('请先进行手签')}},handleSign() {this.handleConfirm(() => this.handleGenerate())},closeBoard() {this.handleReset()this.$emit('update:isShowBoard', false)}}
}
</script>

使用

  <sign-board:folder="CONSTANT.EMPLOYEE_CHECK":is-show-board.sync="isShowBoard":loading="loading"@sign="getSignSrc"/>getSignSrc(src) {},