当前位置：首页 > VUE

vue 移动端实现签名

2026-02-25 20:31:17VUE

移动端签名实现方案

在Vue移动端项目中实现签名功能，可以通过以下方案完成：

使用canvas绘制签名

安装vue-signature-pad库：

npm install vue-signature-pad signature_pad

组件实现示例：

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

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

export default {
  components: {
    VueSignaturePad
  },
  data() {
    return {
      options: {
        penColor: '#000',
        backgroundColor: '#fff'
      }
    }
  },
  methods: {
    clear() {
      this.$refs.signaturePad.clearSignature()
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (!isEmpty) {
        // 处理签名数据，可以转换为图片或Base64
        console.log(data)
      }
    }
  }
}
</script>

<style>
.signature-container {
  margin: 20px;
}
button {
  margin-top: 10px;
  padding: 8px 15px;
}
</style>

触摸事件优化

针对移动端触摸屏优化：

options: {
  penColor: '#000',
  minWidth: 1,
  maxWidth: 3,
  throttle: 16, // 节流控制
  velocityFilterWeight: 0.7 // 速度过滤
}

保存签名为图片

扩展save方法：

save() {
  const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
  if (!isEmpty) {
    const canvas = this.$refs.signaturePad.getSignaturePad().canvas
    const imageData = canvas.toDataURL('image/png')
    // 可以上传到服务器或本地保存
    this.$emit('save', imageData)
  }
}

响应式处理

添加窗口大小变化监听：

mounted() {
  window.addEventListener('resize', this.resizeCanvas)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeCanvas)
},
methods: {
  resizeCanvas() {
    const canvas = this.$refs.signaturePad.getSignaturePad().canvas
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight
    this.$refs.signaturePad.clearSignature()
  }
}