uni-app 手写签名组件，弹框签名，可配置签名，签名返回base64，签名专用，手写一键使用 文档签字 - 前端组件首发 typeError

针对您提出的uni-app手写签名组件需求，以下是一个简化的实现示例，该组件支持在弹框中进行签名，并将签名结果以base64格式返回。此示例假设您已经熟悉uni-app的基本开发流程。

首先，确保在您的项目中安装了必要的依赖，如canvas相关库（uni-app自带canvas支持，无需额外安装）。

1. 创建签名组件 Signature.vue

<template>
  <view class="container">
    <button @click="showSignature">手写签名</button>
    <view v-if="isVisible" class="modal" @click.self="hideSignature">
      <view class="modal-content" @click.stop>
        <canvas canvas-id="signatureCanvas" style="width: 300px; height: 200px;"></canvas>
        <button @click="clearCanvas">清空</button>
        <button @click="getSignature">完成</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      ctx: null,
    };
  },
  methods: {
    showSignature() {
      this.isVisible = true;
      this.ctx = uni.createCanvasContext('signatureCanvas');
      this.ctx.setStrokeStyle('#000');
      this.ctx.setLineWidth(2);
      this.ctx.setLineCap('round');
    },
    hideSignature() {
      this.isVisible = false;
      this.ctx.draw(false); // 清除绘图状态
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, 300, 200);
      this.ctx.draw();
    },
    getSignature() {
      uni.canvasToTempFilePath({
        canvasId: 'signatureCanvas',
        success: (res) => {
          uni.getFileSystemManager().readFile({
            filePath: res.tempFilePath,
            encoding: 'base64',
            success: (data) => {
              this.$emit('signature', data.data);
              this.hideSignature();
            },
          });
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}
</style>

2. 使用签名组件

在您的页面中使用该组件，并监听signature事件以获取签名结果：

<template>
  <view>
    <Signature @signature="handleSignature" />
    <text>{{ signatureBase64 }}</text>
  </view>
</template>

<script>
import Signature from '@/components/Signature.vue';

export default {
  components: {
    Signature,
  },
  data() {
    return {
      signatureBase64: '',
    };
  },
  methods: {
    handleSignature(base64) {
      this.signatureBase64 = base64;
    },
  },
};
</script>

以上代码提供了一个基础的手写签名组件，您可以根据实际需求进行进一步的优化和扩展。