# Vue3 項(xiàng)目（推薦，適配最新Vue版本）
npm install vue-esign --save

# Vue2 項(xiàng)目（指定1.x版本，避免兼容問題）
npm install vue-esign@1.0.10 --save

// Vue3 項(xiàng)目（main.js / main.ts）
import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'

const app = createApp(App)
app.use(vueEsign) // 全局注冊簽名組件
app.mount('#app')

// Vue2 項(xiàng)目（main.js）
import Vue from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'

Vue.use(vueEsign) // 全局注冊簽名組件
new Vue({
  el: '#app',
  render: h => h(App)
})

<template>
  <!-- 簽名組件，直接使用 -->
  <vue-esign ref="esign" :width="800" :height="400" />
</template>

<script setup>
// Vue3 局部引入
import { ref } from 'vue'
import vueEsign from 'vue-esign'

const esign = ref(null) // 獲取簽名組件實(shí)例（必須！）
</script>

<!-- Vue2 局部引入 -->
<script>
import vueEsign from 'vue-esign'
export default {
  components: {
    vueEsign // 局部注冊組件
  },
  data() {
    return {
      esign: null // 獲取簽名組件實(shí)例
    }
  }
}
</script>

<template>
  <div class="esign-container" style="padding: 20px;">
    <!-- 簽名畫板（核心組件） -->
    <vue-esign
      ref="esign"
      :width="800"       <!-- 畫板寬度（px），可自定義 -->
      :height="400"      <!-- 畫板高度（px），可自定義 -->
      :lineWidth="6"     <!-- 筆跡寬度，越大數(shù)據(jù)越粗 -->
      :lineColor="#000"  <!-- 筆跡顏色，支持十六進(jìn)制（如#ff6600） -->
      :bgColor="#f5f5f5" <!-- 畫板背景色，淺灰色更顯筆跡 -->
      style="border: 1px solid #ddd; border-radius: 8px;"
    />

    <!-- 操作按鈕（清空+保存） -->
    <div style="margin-top: 20px;">
      <button @click="handleReset" style="margin-right: 10px; padding: 8px 16px; cursor: pointer;">??? 清空簽名</button>
      <button @click="handleSave" style="padding: 8px 16px; background: #409eff; color: #fff; border: none; border-radius: 4px; cursor: pointer;">?? 保存簽名</button>
    </div>

    <!-- 簽名預(yù)覽（保存后顯示） -->
    <div v-if="signImg" style="margin-top: 20px;">
      <h4>?? 簽名預(yù)覽：</h4>
      <img :src="signImg" alt="簽名圖片" style="max-width: 800px; border: 1px solid #eee;">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 簽名組件實(shí)例（必須通過ref獲取，才能調(diào)用內(nèi)置方法）
const esign = ref(null)
// 保存的簽名圖片（base64格式，可用于預(yù)覽、上傳）
const signImg = ref('')

// 清空簽名（調(diào)用插件內(nèi)置reset方法）
const handleReset = () => {
  esign.value.reset() // 清空畫板
  signImg.value = '' // 清空預(yù)覽圖
}

// 保存簽名（轉(zhuǎn)為base64格式）
const handleSave = async () => {
  try {
    // 調(diào)用插件內(nèi)置generate方法，生成base64圖片
    const base64 = await esign.value.generate()
    if (!base64) {
      alert('?? 請先完成簽名再保存哦！')
      return
    }
    signImg.value = base64 // 顯示預(yù)覽圖
    // 后續(xù)可將base64傳給后端保存，或轉(zhuǎn)為文件上傳
    console.log('簽名base64：', base64)
  } catch (error) {
    console.error('保存簽名失?。?, error)
    alert('保存簽名失敗，請重試！')
  }
}
</script>

<vue-esign
  ref="esign"
  :width="800"
  :height="400"
  :lineWidth="8"       <!-- 粗筆跡 -->
  :lineColor="#ff6600" <!-- 橙色筆跡，更醒目 -->
  bgImg="https://xxx.com/sign-bg.png" <!-- 自定義背景圖URL -->
/>