vue2和vue3setup（写字）签名

vue 签名

安装：import vueEsign from 'vue-esign'
main.js：填写 Vue.use(vueEsign)

vue2

<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>

vue3 setup

<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.value" :on-close="()=>{showViewer=false}"
            :url-list="[resultImg]" />
    </div>
</template>
<script setup>

import { reactive, ref, toRef, toRefs, watch } from "vue-demi";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const lineWidth = ref(8) // 画笔粗细
const lineColor = ref('#000') // 画笔颜色
const bgColor = ref('#fff') // 画布背景颜色
const isCrop = ref(false) // 是否剪裁
const showViewer = ref(false) // 预览签名
const resultImg = ref('') // base64图片

const esign = ref('')
function handleReset() {
    // this.$refs['esign'].reset() // 清空画布
    esign.value.reset() // 清空画布

}
function handleGenerate() {
    esign.value.generate().then(res => {
        resultImg.value = res // 得到了签字生成的base64图片
        showViewer.value = true
        console.log(res)
    }).catch(() => { // 没有签名，点击生成图片时调用
        ElMessage({
            message: '未签名!',
            type: 'warning'
        })
    })
}


</script>
  
<style lang="scss" scoped>
.content {
    border: 1px solid #f1f1f1;
}

.flex {
    margin: 10px;
    display: flex;
    align-content: center;
}
</style>