Vue3实现手写签名之Vue3-signature的快速应用实例

npmnpm install vue3-signature --save# yarnyarn add vue3-signature# pnpmpnpm add vue3-signature

<template>  <div class="signature-container">    <!-- 签名画布核心组件 -->    <Vue3Signature      ref="signatureRef"      :width="500"      :height="300"      :pen-color="#000000"      :pen-width="3"      :disabled="false"      class="signature-canvas"    />
    <!-- 操作按钮组 -->    <div class="signature-btns">      <button @click="clearSignature">清空签名</button>      <button @click="saveSignature">保存签名</button>      <button @click="undoSignature">撤销一步</button>    </div>  </div></template><script setup>import { ref } from 'vue'import Vue3Signature from 'vue3-signature'// 获取组件实例const signatureRef = ref(null)// 清空签名const clearSignature = () => {  signatureRef.value.clear()}// 撤销上一步书写const undoSignature = () => {  // 先判断是否有可撤销的步骤  if (signatureRef.value.canUndo()) {    signatureRef.value.undo()  } else {    alert('已无可撤销的步骤！')  }}// 保存签名（支持Base64/Blob格式）const saveSignature = () => {  // 获取Base64格式的签名图片  const base64 = signatureRef.value.getDataUrl('image/png', 1.0)  // 也可获取Blob格式（适合上传）  // const blob = signatureRef.value.getBlob('image/png', 1.0)
  console.log('签名Base64：', base64)  // 可将base64/blob上传到后端，或展示在页面上}</script><style scoped>.signature-container {  width: 500px;  margin: 20px auto;}.signature-canvas {  border: 1px solid #e5e5e5;  border-radius: 4px;}.signature-btns {  margin-top: 15px;  display: flex;  gap: 10px;}.signature-btns button {  padding: 6px 12px;  background: #409eff;  color: #fff;  border: none;  border-radius: 4px;  cursor: pointer;}.signature-btns button:hover {  background: #66b1ff;}</style>

<Vue3Signature  :width="document.documentElement.clientWidth - 40"  :height="200"  ref="signatureRef"/>

const checkSignature = () => {  // isEmpty() 判断画布是否为空  if (signatureRef.value.isEmpty()) {    alert('请完成手写签名！')    return false  }  return true}// 保存前先校验const saveSignature = () => {  if (!checkSignature()) return  // 后续保存逻辑...}