uview-plus

# Signature 签名3.1.86

打开

Signature 签名组件，支持自定义颜色、粗细、背景色，可用于用户签名场景。

# 基础用法

<template>
  <view>
    <up-signature 
        ref="signature1" 
        :width="700" 
        :height="200" 
        bg-color="#f5f5f5"
        :show-toolbar="false"
        @confirm="onConfirm1"
        @error="onError1"
    ></up-signature>
  </view>
</template>
</script>

# 自定义样式

<template>
  <view>
    <up-signature 
      ref="signature" 
      :width="300" 
      :height="200" 
      color="#ff0000"
      thickness="6"
      bg-color="#f5f5f0"
      @confirm="onConfirm"
      @error="onError"
    ></up-signature>
  </view>
</template>
</script>

# 隐藏工具栏

<template>
  <view>
    <up-signature 
      ref="signature" 
      :width="300" 
      :height="200" 
      bg-color="#ffffff"
      :show-toolbar="false"
      @confirm="onConfirm"
      @error="onError"
    ></up-signature>
  </view>
</template>
</script>

# API

# Props

参数名 说明 类型 默认值 可选值
width 画布宽度 String / Number 300 -
height 画布高度 String / Number 200 -
bgColor 背景颜色 String #ffffff -
color 默认笔画颜色 String #000000 -
thickness 默认笔画粗细 String / Number 3 -
showToolbar 是否显示工具栏 Boolean true false

# Events

事件名 说明 回调参数
confirm 签名确认时触发 tempFilePath: 临时文件路径
error 签名导出失败时触发 error: 错误信息

# Methods

通过 ref 可以获取到组件实例并调用组件方法

方法名 说明 参数
clear() 清空签名 -
undo() 撤销上一步操作 -
exportSignature() 导出签名图片 -

# Slots

暂无插槽

# 完整示例

<template>
  <view class="u-page">
    <view class="u-page__item">
      <text class="u-page__item__title">基础签名示例</text>
      <view class="u-page__item__content">
        <up-signature 
          ref="signature1" 
          :width="300" 
          :height="200" 
          bg-color="#f5f5f5"
          :show-toolbar="false"
          @confirm="onConfirm1"
          @error="onError1"
        ></up-signature>
        
        <view class="preview" v-if="signatureImage1">
          <text>签名预览:</text>
          <image :src="signatureImage1" class="preview-image"></image>
          <u-button type="primary" size="small" @click="clearSignature1">清除签名</u-button>
        </view>
      </view>
    </view>
    
    <view class="u-page__item">
      <text class="u-page__item__title">自定义颜色和工具栏示例</text>
      <view class="u-page__item__content">
        <up-signature 
          ref="signature2" 
          :width="300" 
          :height="200" 
          color="#ff0000"
          thickness="6"
          bg-color="#f5f5f5"
          @confirm="onConfirm2"
          @error="onError2"
        ></up-signature>
        
        <view class="preview" v-if="signatureImage2">
          <text>签名预览:</text>
          <image :src="signatureImage2" class="preview-image"></image>
          <u-button type="primary" size="small" @click="clearSignature2">清除签名</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      signatureImage1: '',
      signatureImage2: ''
    };
  },
  methods: {
    onConfirm1(tempFilePath) {
      this.signatureImage1 = tempFilePath;
      console.log('签名图片路径1:', tempFilePath);
    },
    onError1(err) {
      console.error('签名导出错误1:', err);
      uni.showToast({
        title: '签名导出失败',
        icon: 'none'
      });
    },
    clearSignature1() {
      this.signatureImage1 = '';
      this.$refs.signature1.clear();
    },
    
    onConfirm2(tempFilePath) {
      this.signatureImage2 = tempFilePath;
      console.log('签名图片路径2:', tempFilePath);
    },
    onError2(err) {
      console.error('签名导出错误2:', err);
      uni.showToast({
        title: '签名导出失败',
        icon: 'none'
      });
    },
    clearSignature2() {
      this.signatureImage2 = '';
      this.$refs.signature2.clear();
    }
  }
};
</script>

<style lang="scss" scoped>
.u-page__item {
  margin-bottom: 35px;
}
.u-page__item__title {
  margin-bottom: 10px;
  font-weight: bold;
}

.preview {
  margin-top: 20px;
  text-align: center;
}

.preview-image {
  width: 300px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #e0e0e0;
}
</style>

# 功能说明

  1. 支持手写签名绘制
  2. 提供工具栏，支持撤销、清空、导出等功能
  3. 可自定义画布尺寸、背景色、笔画颜色和粗细
  4. 支持实时预览签名效果
  5. 可通过方法控制组件行为

# 注意事项

  1. 在H5平台使用时，需要确保运行在安全域名环境下
  2. 导出的图片为临时路径，如需永久保存需要自行上传到服务器
  3. 组件默认宽度为300px，高度为200px，可根据实际需求调整
  4. 工具栏默认显示，可通过show-toolbar属性控制显示隐藏

← Color 色彩 →