vue中实现签名画板

特意封装成了一个组件，签名之后会生成一张图片
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.fileUrl
        this.$emit('sign', this.signSrc)
      } catch (e) {
        this.$message.error('请先进行手签')
      }
    },
    handleSign() {
      this.handleConfirm(() => this.handleGenerate())
    },
    closeBoard() {
      this.handleReset()
      this.$emit('update:isShowBoard', false)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

使用

  <sign-board
    :folder="CONSTANT.EMPLOYEE_CHECK"
    :is-show-board.sync="isShowBoard"
    :loading="loading"
    @sign="getSignSrc"
  />
    getSignSrc(src) {
    },
1
2
3
4
5
6
7
8