当前位置：首页 > 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
```

组件实现：

vue实现签章


<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样式：

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

注意事项

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

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

标签: 签章 vue

分享给朋友：

vue实现sql操作

在Vue中实现SQL操作通常需要结合后端服务或本地数据库技术，因为前端JavaScript无法直接连接SQL数据库。以下是几种常见的实现方式：通过API与后端交互 Vue前端通过HTTP请求（如a…

vue实现字母添加排序

实现字母添加排序的方法在Vue中实现字母添加排序功能，可以通过以下步骤完成：创建Vue实例并定义数据 new Vue({ el: '#app', data: { letters…

vue实现递归

Vue 实现递归组件的方法在 Vue 中实现递归组件通常用于处理树形结构数据（如菜单、评论列表、文件目录等）。以下是具体实现方法：定义递归组件通过 name 选项让组件可以递归调用自身：…

vue实现数组

Vue 实现数组操作的方法在 Vue 中，数组的操作需要特别注意响应式的问题。Vue 提供了一些方法来确保数组的变动能够触发视图更新。响应式数组方法 Vue 对以下数组方法进行了封装，确保它们能…

vue 实现href

Vue 实现 href 的方法在 Vue 中实现 href 功能可以通过多种方式，具体取决于需求场景。以下是几种常见的方法：使用 <a> 标签直接使用 HTML 的 <a&g…

vue实现接口

在 Vue 中实现接口请求 Vue 本身不直接提供 HTTP 请求功能，通常需要借助第三方库如 axios 或 fetch 来实现接口请求。以下是几种常见方法：使用 axios 发送请求安装 a…

vue实现签章