效果圖：

?下載依賴：

npm install vue-esign --save

引入依賴（main.js引入）：

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

?

HTML：

<div class="esignTest"><div class="design-set"><vue-esign ref="esign" :width="800" :height="300":isCrop="isCrop":lineWidth="lineWidth":lineColor="lineColor":bgColor.sync="bgColor"/></div><button @click="handleReset" class="reset-btn">清空畫板</button><button @click="handleGenerate" class="set-img-btn">生成圖片</button></div>

js：

data() {return {lineWidth: 6,lineColor: '#000000',bgColor: '',resultImg: '',isCrop: false}},methods: {//清空handleReset() {this.$refs.esign.reset()},//轉換圖片handleGenerate() {this.$refs.esign.generate().then(res => {this.resultImg = res}).catch(err => {alert(err) // 畫布沒有簽字時會執行這里 'Not Signned'})}}

?

?

總結

以上是生活随笔為你收集整理的vue 实现手写电子签名/生成图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。