# Signature 签名3.1.86

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

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基础用法

<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 setup>
import { ref } from 'vue';

const signature1 = ref(null);

const onConfirm1 = (tempFilePath) => {
  console.log('签名图片路径:', tempFilePath);
};

const onError1 = (err) => {
  console.error('签名导出错误:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};
</script>

<script>
export default {
  methods: {
    onConfirm1(tempFilePath) {
      console.log('签名图片路径:', tempFilePath);
    },
    onError1(err) {
      console.error('签名导出错误:', err);
      uni.showToast({
        title: '签名导出失败',
        icon: 'none'
      });
    }
  }
};
</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 setup>
import { ref } from 'vue';

const signature = ref(null);

const onConfirm = (tempFilePath) => {
  console.log('签名图片路径:', tempFilePath);
};

const onError = (err) => {
  console.error('签名导出错误:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};
</script>

<script>
export default {
  methods: {
    onConfirm(tempFilePath) {
      console.log('签名图片路径:', tempFilePath);
    },
    onError(err) {
      console.error('签名导出错误:', err);
      uni.showToast({
        title: '签名导出失败',
        icon: 'none'
      });
    }
  }
};
</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 setup>
import { ref } from 'vue';

const signature = ref(null);

const onConfirm = (tempFilePath) => {
  console.log('签名图片路径:', tempFilePath);
};

const onError = (err) => {
  console.error('签名导出错误:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};
</script>

<script>
export default {
  methods: {
    onConfirm(tempFilePath) {
      console.log('签名图片路径:', tempFilePath);
    },
    onError(err) {
      console.error('签名导出错误:', err);
      uni.showToast({
        title: '签名导出失败',
        icon: 'none'
      });
    }
  }
};
</script>

# 完整示例

<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>
          <up-button type="primary" size="small" @click="clearSignature1">清除签名</up-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>
          <up-button type="primary" size="small" @click="clearSignature2">清除签名</up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const signature1 = ref(null);
const signature2 = ref(null);
const signatureImage1 = ref('');
const signatureImage2 = ref('');

const onConfirm1 = (tempFilePath) => {
  signatureImage1.value = tempFilePath;
  console.log('签名图片路径1:', tempFilePath);
};

const onError1 = (err) => {
  console.error('签名导出错误1:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};

const clearSignature1 = () => {
  signatureImage1.value = '';
  signature1.value.clear();
};

const onConfirm2 = (tempFilePath) => {
  signatureImage2.value = tempFilePath;
  console.log('签名图片路径2:', tempFilePath);
};

const onError2 = (err) => {
  console.error('签名导出错误2:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};

const clearSignature2 = () => {
  signatureImage2.value = '';
  signature2.value.clear();
};
</script>

<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>

# 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

暂无插槽

# 功能说明

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

# 注意事项

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

← Cropper 图片裁剪 Markdown 文本解析 →