UviewUltra 4.0

Appearance

Signature 签名4.4.0 ​

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

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基础用法 ​

vue
<template>
  <view>
    <up-signature 
        ref="signature1" 
        :width="700" 
        :height="200" 
        bg-color="#f5f5f5"
        :show-toolbar="false"
        @confirm="onConfirm1"
        @error="onError1"
    ></up-signature>
  </view>
</template>
js
<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>

自定义样式 ​

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

隐藏工具栏 ​

vue
<template>
  <view>
    <up-signature 
      ref="signature" 
      :width="300" 
      :height="200" 
      bg-color="#ffffff"
      :show-toolbar="false"
      @confirm="onConfirm"
      @error="onError"
    ></up-signature>
  </view>
</template>
js
<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>

完整示例 ​

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

API ​

Props ​

参数名说明类型默认值可选值
width画布宽度String / Number300-
height画布高度String / Number200-
bgColor背景颜色String#ffffff-
color默认笔画颜色String#000000-
thickness默认笔画粗细String / Number3-
showToolbar是否显示工具栏Booleantruefalse

Events ​

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

Methods ​

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

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

Slots ​

暂无插槽

功能说明 ​

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

注意事项 ​

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