vue实现签字板

效果

1644306323(1).png

点击预览

1644306522(1).png

安装：

npm install vue-esign --save

使用：

在main.js中引入

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

实现源码

<template>
  <div class="page-content">
    <div class="content">
      <vue-esign ref="esign" :width="800" :height="500" :line-width="8" line-color="#000" bg-color="#FFF" />
    </div>
    <div class="flex">
      <el-button type="danger" @click="handleReset">重签</el-button>
      <el-button type="primary" @click="handleGenerate">预览</el-button>
      <el-button type="success" @click="handleGenerate">确认</el-button>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="()=>{showViewer=false}"
      :url-list="[resultImg]"
    />
  </div>
</template>
<script>
export default {
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer') // 预览签名图片的插件，无需下载，elementui自带
  },
  data() {
    return {
      lineWidth: 8, // 画笔粗细
      lineColor: '#000', // 画笔颜色
      bgColor: '#fff', // 画布背景颜色
      isCrop: false, // 是否剪裁
      showViewer: false, // 预览签名
      resultImg: '' // base64图片
    }
  },
  methods: {
    handleReset() {
      this.$refs['esign'].reset() // 清空画布
    },
    handleGenerate() {
      this.$refs['esign'].generate().then(res => {
        this.resultImg = res // 得到了签字生成的base64图片
        this.showViewer = true
      }).catch(() => { // 没有签名，点击生成图片时调用
        this.$message({
          message: '未签名!',
          type: 'warning'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .content {
    border: 1px solid #f1f1f1;
  }
  .flex {
    margin: 10px;
    display: flex;
    align-content: center;
  }
</style>