当前位置：首页 > VUE

vue实现签章

2026-02-10 05:28:00VUE

Vue 实现签章功能

在 Vue 中实现签章功能通常需要借助第三方库或自定义画布操作。以下是两种常见实现方式：

使用 HTML5 Canvas 实现基础签章

<template>
  <div>
    <canvas ref="signatureCanvas" 
            @mousedown="startDrawing" 
            @mousemove="draw" 
            @mouseup="stopDrawing"
            @mouseleave="stopDrawing"></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
    },
    draw(e) {
      if (!this.isDrawing) return;
      const canvas = this.$refs.signatureCanvas;
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      const canvas = this.$refs.signatureCanvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    saveSignature() {
      const canvas = this.$refs.signatureCanvas;
      const image = canvas.toDataURL('image/png');
      console.log(image); // 可上传到服务器或保存
    }
  },
  mounted() {
    const canvas = this.$refs.signatureCanvas;
    canvas.width = 400;
    canvas.height = 200;
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
  }
}
</script>

使用第三方库 vue-signature-pad

安装依赖：
```
npm install vue-signature-pad
```

组件实现：


<template>
<div>
 <VueSignaturePad 
   ref="signaturePad" 
   width="400px" 
   height="200px" 
   :options="{ penColor: '#000' }" />
 <button @click="undo">撤销</button>
 <button @click="clear">清除</button>
 <button @click="save">保存</button>
</div>
</template>

import VueSignaturePad from 'vue-signature-pad'

export default { components: { VueSignaturePad }, methods: { undo() { this.$refs.signaturePad.undoSignature(); }, clear() { this.$refs.signaturePad.clearSignature(); }, save() { const { data } = this.$refs.signaturePad.saveSignature(); console.log(data); // base64格式图像数据 } } }

```

实现印章效果

如需实现圆形印章效果，可添加以下CSS样式：

vue实现签章

.canvas-container {
  border: 1px dashed #ccc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

注意事项

移动端需添加触摸事件支持（@touchstart, @touchmove, @touchend）
保存时可转换为PNG或JPG格式
考虑添加时间戳等防伪信息
重要签章建议结合后端验证机制

以上方法可根据实际需求选择使用，第三方库提供更多高级功能如撤销、重做等，而原生Canvas实现则更灵活可控。

标签: 签章 vue

分享给朋友：

vue实现主题

Vue 实现主题的方法使用 CSS 变量动态切换主题定义全局 CSS 变量，通过修改这些变量实现主题切换。在 Vue 的根组件或全局样式中定义变量： :root { --primary-co…

vue实现登出

实现Vue登出功能登出功能通常涉及清除用户会话、令牌或本地存储的数据，并重定向到登录页面。以下是几种常见的实现方式：清除用户令牌和状态在Vuex的store中定义一个logout mutati…

vue observer实现

Vue Observer 实现原理 Vue 的响应式系统核心是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现的 Observer 模式。以下是关键实现细…

vue实现刷卡

Vue 实现刷卡效果在 Vue 中实现刷卡效果可以通过 CSS 动画和 Vue 的过渡系统结合完成。以下是一种常见的实现方式：基础实现方法安装 Vue 过渡依赖（如果尚未安装）： npm i…

vue 实现折叠

Vue 实现折叠功能的方法在 Vue 中实现折叠功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-if 或 v-show 控制显示隐藏通过绑定一个布尔值变量，结合 v-if 或 v…

vue实现框选

Vue 实现框选功能在 Vue 中实现框选功能通常需要监听鼠标事件，计算选区范围，并根据选区范围高亮或选中元素。以下是实现框选功能的关键步骤。监听鼠标事件在 Vue 模板中，为容器元素绑定鼠标…

vue实现签章