sound_ai/src/views/test/signatureTest.vue

<template>
  <div class="signature-container">
    <h3>电子签名测试</h3>
    
    <div class="demo-section">
      <h4>基础用法</h4>
      <SignaturePad
        v-model:value="signatureImage"
        height="250px"
        @save="handleSave"
        @clear="handleClear"
      />
    </div>
    
    <div class="demo-section">
      <h4>自定义样式</h4>
      <SignaturePad
        v-model:value="customSignature"
        height="200px"
        :line-width="3"
        line-color="#2196F3"
        background-color="#f5f5f5"
        clear-btn-text="重置"
        save-btn-text="确认"
      />
    </div>
    
    <div class="demo-section">
      <h4>无控制按钮</h4>
      <SignaturePad
        ref="noControlsPad"
        v-model:value="noControlsSignature"
        height="150px"
        :show-controls="false"
      />
      <div class="custom-controls">
        <button class="action-btn clear-btn" @click="clearNoControls">清除</button>
        <button class="action-btn save-btn" @click="saveNoControls">保存</button>
      </div>
    </div>
    
    <div v-if="signatureImage" class="result-section">
      <h4>签名结果</h4>
      <p>签名已保存为Base64格式，长度为: {{ signatureImage.length }}</p>
      <div class="preview">
        <img :src="signatureImage" alt="签名预览" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import SignaturePad from '@/components/SignaturePad.vue';

defineOptions({
  name: 'SignatureTest',
});

// 签名数据
const signatureImage = ref<string>('');
const customSignature = ref<string>('');
const noControlsSignature = ref<string>('');

// 无控制按钮的签名板引用
const noControlsPad = ref<InstanceType<typeof SignaturePad> | null>(null);

// 处理保存事件
const handleSave = (dataUrl: string) => {
  console.log('签名已保存，长度为:', dataUrl.length);
};

// 处理清除事件
const handleClear = () => {
  console.log('签名已清除');
};

// 清除无控制按钮的签名
const clearNoControls = () => {
  noControlsPad.value?.clear();
};

// 保存无控制按钮的签名
const saveNoControls = () => {
  noControlsPad.value?.save();
};

onMounted(() => {
  console.log('SignatureTest mounted');
});
</script>

<style scoped>
.signature-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
}

h4 {
  margin-bottom: 10px;
  color: #333;
}

.custom-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: white;
}

.clear-btn {
  background-color: #f44336;
}

.clear-btn:hover {
  background-color: #d32f2f;
}

.save-btn {
  background-color: #4CAF50;
}

.save-btn:hover {
  background-color: #45a049;
}

.result-section {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.preview {
  margin-top: 10px;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.preview img {
  width: 100%;
  height: auto;
}
</style>