Vue3實(shí)現(xiàn)手寫簽名之Vue3-signature的快速應(yīng)用實(shí)例
前言
在公務(wù)辦理、電子合同、在線審批等場景中，手寫簽名的電子化需求越來越常見?；?Vue3 開發(fā)的 vue3-signature 組件，能快速幫我們實(shí)現(xiàn)瀏覽器端的手寫簽名功能，無需復(fù)雜的 canvas 原生開發(fā)，今天就帶大家從零掌握這個實(shí)用組件的使用。
一、什么是 vue3-signature？
vue3-signature是專門適配 Vue3 生態(tài)的手寫簽名組件，底層基于 canvas 實(shí)現(xiàn)，支持鼠標(biāo)、觸摸（移動端）手寫，提供了簽名保存、清空、回退、更換顏色 / 粗細(xì)等核心功能，體積輕量、API 簡潔，完美兼容 Vue3 的組合式 API 和語法，是 Vue3 項(xiàng)目實(shí)現(xiàn)電子簽名的首選方案。
二、快速上手：5 分鐘集成到 Vue3 項(xiàng)目
1. 安裝依賴
首先在 Vue3 項(xiàng)目中安裝組件（支持 npm/yarn/pnpm）：
npmnpm install vue3-signature --save# yarnyarn add vue3-signature# pnpmpnpm add vue3-signature
2. 基礎(chǔ)使用示例
在 Vue3 單文件組件中引入并使用，這是最核心的基礎(chǔ)用法：
<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'// 獲取組件實(shí)例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>下面是簽名的效果展示：
三、核心配置與常用 API
1. 核心屬性（Props）
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| width | Number | 400 | 畫布寬度（px） |
| height | Number | 200 | 畫布高度（px） |
| penColor | String | #000000 | 畫筆顏色（支持十六進(jìn)制） |
| penWidth | Number | 2 | 畫筆粗細(xì)（px） |
| disabled | Boolean | false | 是否禁用簽名 |
| backgroundColor | String | #ffffff | 畫布背景色 |
2. 常用方法（通過 ref 調(diào)用）
| 方法名 | 參數(shù)說明 | 功能 |
|---|---|---|
| clear() | 無 | 清空整個簽名畫布 |
| undo() | 無 | 撤銷上一步書寫 |
| canUndo() | 無 | 判斷是否可撤銷（返回布爾值） |
| getDataUrl(type, quality) | type：圖片格式（如 image/png）；quality：清晰度（0-1） | 獲取簽名的 Base64 編碼 |
| getBlob(type, quality) | 同 getDataUrl | 獲取簽名的 Blob 對象（適合上傳） |
四、實(shí)戰(zhàn)優(yōu)化：解決常見問題
1. 適配移動端
vue3-signature天然支持觸摸事件，只需保證畫布寬度適配移動端：
<Vue3Signature :width="document.documentElement.clientWidth - 40" :height="200" ref="signatureRef"/>
2. 校驗(yàn)是否簽名
提交前判斷用戶是否完成簽名，避免空簽名提交：
const checkSignature = () => { // isEmpty() 判斷畫布是否為空 if (signatureRef.value.isEmpty()) { alert('請完成手寫簽名！') return false } return true}// 保存前先校驗(yàn)const saveSignature = () => { if (!checkSignature()) return // 后續(xù)保存邏輯...}3. 圖片跨域問題
若需在簽名畫布中插入背景圖（如合同模板），需確保圖片資源支持跨域，否則會導(dǎo)致getDataUrl/getBlob報錯，可要求后端配置跨域頭，或使用同域圖片。 **# 五、總結(jié)
- vue3-signature是 Vue3 項(xiàng)目實(shí)現(xiàn)電子簽名的高效組件，基于 canvas 封裝，無需原生 canvas 開發(fā)，API 簡潔易上手；
- 核心流程：安裝 → 引入組件 → 配置基礎(chǔ)屬性 → 通過 ref 調(diào)用方法實(shí)現(xiàn)清空、保存、撤銷等功能；
- 實(shí)際開發(fā)中需注意移動端適配、簽名非空校驗(yàn)、圖片跨域等細(xì)節(jié)，滿足不同場景的簽名需求。
組件幾乎覆蓋了電子簽名的所有基礎(chǔ)場景，無論是簡單的表單簽名，還是復(fù)雜的合同簽署，都能快速落地。趕緊在你的 Vue3 項(xiàng)目中試試吧！更多參考地址：www.npmjs.com/package/vue…**
總結(jié)
到此這篇關(guān)于Vue3實(shí)現(xiàn)手寫簽名之Vue3-signature快速應(yīng)用的文章就介紹到這了,更多相關(guān)Vue3手寫簽名Vue3-signature內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目中使用Vux的安裝過程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料，需要的朋友可以參考下。2017-07-07
vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動畫效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue多頁面項(xiàng)目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實(shí)現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下2023-03-03
vue項(xiàng)目中的遇錯:Invalid?Host?header問題
這篇文章主要介紹了vue項(xiàng)目中的遇錯:Invalid?Host?header問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01