当前位置：首页 > VUE

vue实现手机端签名

2026-02-23 05:03:08VUE

实现手机端签名功能

在Vue中实现手机端签名功能，可以通过以下方法完成。主要依赖HTML5的Canvas元素和触摸事件处理。

安装依赖

推荐使用vue-signature-pad库简化实现：

npm install vue-signature-pad

基础实现

创建一个签名组件：

vue实现手机端签名

<template>
  <div class="signature-container">
    <vue-signature-pad
      ref="signaturePad"
      width="100%"
      height="300px"
      :options="{ penColor: '#000' }"
    />
    <div class="button-group">
      <button @click="clear">清除</button>
      <button @click="save">保存</button>
    </div>
  </div>
</template>

<script>
import VueSignaturePad from 'vue-signature-pad'

export default {
  components: {
    VueSignaturePad
  },
  methods: {
    clear() {
      this.$refs.signaturePad.clearSignature()
    },
    async save() {
      const { data } = await this.$refs.signaturePad.saveSignature()
      this.$emit('save', data)
    }
  }
}
</script>

<style>
.signature-container {
  width: 100%;
  border: 1px solid #ccc;
}
.button-group {
  margin-top: 10px;
}
button {
  margin-right: 10px;
  padding: 5px 10px;
}
</style>

触摸事件优化

为更好支持移动设备，需要添加触摸事件处理：

mounted() {
  const canvas = this.$refs.signaturePad.$el.querySelector('canvas')
  canvas.addEventListener('touchstart', this.handleTouchStart, { passive: false })
  canvas.addEventListener('touchmove', this.handleTouchMove, { passive: false })
},

methods: {
  handleTouchStart(e) {
    e.preventDefault()
    const touch = e.touches[0]
    const mouseEvent = new MouseEvent('mousedown', {
      clientX: touch.clientX,
      clientY: touch.clientY
    })
    this.$refs.signaturePad.$el.dispatchEvent(mouseEvent)
  },

  handleTouchMove(e) {
    e.preventDefault()
    const touch = e.touches[0]
    const mouseEvent = new MouseEvent('mousemove', {
      clientX: touch.clientX,
      clientY: touch.clientY
    })
    this.$refs.signaturePad.$el.dispatchEvent(mouseEvent)
  }
}

响应式设计

确保签名板适应不同屏幕尺寸：

vue实现手机端签名

@media (max-width: 768px) {
  .signature-container {
    height: 60vh;
  }
  canvas {
    width: 100% !important;
    height: 100% !important;
  }
}

保存签名数据

将签名保存为图片或数据URL：

save() {
  const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
  if (!isEmpty) {
    // 作为图片下载
    const link = document.createElement('a')
    link.href = data
    link.download = 'signature.png'
    link.click()

    // 或发送到服务器
    // this.$axios.post('/api/save-signature', { image: data })
  }
}

自定义选项

可以通过选项调整签名体验：

options: {
  penColor: '#000',  // 笔迹颜色
  backgroundColor: '#fff',  // 背景色
  minWidth: 1,  // 最小线宽
  maxWidth: 5,  // 最大线宽
  throttle: 16,  // 绘制节流(ms)
  velocityFilterWeight: 0.7  // 速度过滤权重
}