uView Next
4.0.105

外观

Signature 签名组件

约 1488 字大约 5 分钟

2025-10-31

该组件可用于电子签名、手写签名等场景。支持多种画笔颜色、压感绘制、撤销重做、水印等功能。

基本使用

<template>
	<view class="signature-container">
		<un-signature
			ref="signatureRef"
			:penSize="penSize"
			:backgroundColor="backgroundColor"
			@confirm="onConfirm"
		></un-signature>
	</view>
</template>

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

const penSize = ref(5)
const backgroundColor = ref('#fff')
const signatureRef = ref<UnSignatureComponentPublicInstance | null>(null)

const onConfirm = (res) => {
	console.log('签名完成', res)
	// res 为签名图片的 base64 数据
}
</script>

<style lang="scss" scoped>
.signature-container {
	width: 100%;
	height: 300px;
	border: 1px solid #d6d7d8;
	border-radius: 8px;
}
</style>

自定义画笔颜色

可以通过 penColor 属性设置画笔颜色，也可以通过 penColorList 提供颜色选择列表：

<template>
	<view class="signature-container">
		<un-signature
			:penColor="penColor"
			:penColorList="penColorList"
			:showColorList="true"
		></un-signature>
	</view>
</template>

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

const penColor = ref('#FF1E10')
const penColorList = ref(['#4D4D4D', '#FF1E10', '#FFBE00', '#1A9BFF', '#1AAD19'])
</script>

工具栏操作

组件内置了清空、撤销、完成等操作按钮：

<template>
	<view class="signature-container">
		<un-signature
			ref="signatureRef"
			:showToolbar="true"
			:showClear="true"
			:showUndo="true"
			clearText="清空"
			undoText="撤销"
			confirmText="完成"
		></un-signature>
	</view>
</template>

压感绘制

开启压感功能后，可以根据触摸压力调整线条粗细：

<template>
	<view class="signature-container">
		<un-signature
			ref="signatureRef"
			:openSmooth="true"
			:minLineWidth="2"
			:maxLineWidth="8"
		></un-signature>
	</view>
</template>

水印功能

可以为签名添加水印，支持自定义水印文本、颜色、角度等：

<template>
	<view class="signature-container">
		<un-signature
			:showWatermark="true"
			:watermark="watermark"
		></un-signature>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import type { UnWatermarkOption } from '@/uni_modules/uview-unix'

const watermark = ref<UnWatermarkOption>({
	showOnSave: true,
	text: '电子签名',
	color: 'rgba(0, 0, 0, 0.1)',
})

</script>

水印使用示例

1. 基础水印

watermark: {
    text: '电子签名',
    fontSize: 16,
    rotate: -30
}

2. 单个水印

watermark: {
    text: '孙悟空',
    fontSize: 50,
	spacing: 120,
    rotate: 0,
    single: true
}

3. 平铺水印

watermark: {
    text: 'DRAFT',
    color: 'rgba(0, 0, 255, 0.15)',
    fontSize: 14,
    rotate: 0,
    spacing: 80,
    single: false
}

方法调用

可以通过 ref 调用组件的方法：

<template>
	<view>
		<un-signature ref="signatureRef"></un-signature>
		<view class="button-container">
			<un-button @click="clear">清空</un-button>
			<un-button @click="undo">撤销</un-button>
			<un-button @click="confirm">完成</un-button>
		</view>
	</view>
</template>

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

const signatureRef = ref<UnSignatureComponentPublicInstance | null>(null)

const clear = () => {
	signatureRef.value?.clear()
}

const undo = () => {
	signatureRef.value?.undo()
}

const confirm = () => {
	signatureRef.value?.getImage().then(res => {
		console.log('签名图片', res)
	})
}
</script>

自定义样式

可以通过 customStyle 和 toolbarStyle 自定义组件样式：

<template>
	<view class="signature-container">
		<un-signature
			:style="customStyle"
			:toolbarStyle="toolbarStyle"
		></un-signature>
	</view>
</template>

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

const customStyle = ref({
	border: '2px solid #e4e7ed',
	borderRadius: '8px'
})

const toolbarStyle = ref({
	backgroundColor: '#f5f7fa',
	padding: '10px'
})

</script>

API

Props

参数说明类型默认值
title标题String请签名
showTitle是否显示标题Booleantrue
showToolbar是否显示工具栏Booleantrue
showColorList是否显示颜色列表Booleantrue
showClear是否显示清空按钮Booleantrue
showUndo是否显示撤销按钮Booleantrue
showClose是否显示关闭按钮Booleantrue
closeText关闭按钮的文本String关闭
clearText清空按钮的文本String清空
undoText撤销按钮的文本String撤销
confirmText完成按钮的文本String完成
toolbarStyle工具栏对齐方式Object{}
fixed是否固定标题栏和工具栏Booleanfalse
minLineWidth线条最小宽度String | Number2
maxLineWidth线条最大宽度String | Number6
penColor画笔颜色String#000000
penColorList画笔颜色列表String[]['#000000', '#FF1E10', '#FFBE00', '#1A9BFF', '#1AAD19']
penSize画笔大小String | Number2
backgroundColor背景颜色String#ffffff
typecanvas类型String2d
openSmooth是否开启压感Booleanfalse
maxHistoryLength最大历史记录数String | Number20
landscape是否横屏Booleanfalse
disableScroll是否禁用滚动Booleantrue
disabled是否禁用Booleanfalse
boundingBox只生成内容区域Booleanfalse
showWatermark是否显示水印Booleanfalse
watermark水印配置对象UnWatermarkOption-

Events

事件名说明类型
clear清空签名时触发
Function
undo撤销操作时触发
Function
confirm完成签名时触发
Function

Methods

方法名说明参数
clear清空签名
Function
undo撤销上一步操作
Function
getImage获取签名图片
Function

Slots

名称说明
title自定义标题内容
toolbar自定义工具栏内容

数据类型

/**
 * 水印配置项类型
 */
type UnWatermarkOption = {
  text: string;             // 水印文本内容
  fontSize?: string | number; // 字体大小
  fontFamily?: string;        // 字体-family
  color?: string;           // 字体颜色
  spacing?: string | number; // 水印间距
  bold?: boolean;           // 是否加粗
  rotate?: string | number; // 水印旋转角度
  single?: boolean;         // 是否为单个水印，默认false
  showOnSave?: boolean; // 是否在保存时显示
}

Scss 变量

变量名默认值说明
$un-signature-title-padding10px标题内边距
$un-signature-toolbar-padding10px 10px 20px 10px工具栏内边距
$un-signature-title-font-size$text-base标题字体大小
$un-signature-title-text-color$text-color标题文本颜色
$un-signature-title-bg-colorrgba(255, 255, 255, 0.8)标题背景颜色
$un-signature-toolbar-bg-colorrgba(255, 255, 255, 0.8)工具栏背景颜色
$un-signature-color-size26px颜色选择器大小
$un-signature-color-border6px solid #fff颜色选择器边框
$un-signature-color-box-shadow0 0 5px 0 rgba(0, 0, 0, 0.1)颜色选择器阴影
$un-signature-color-margin0 3px颜色选择器间距
$un-signature-toolbar-item-margin-right10px工具栏项右侧间距
$un-signature-z-index9999组件层级
$un-signature-landscape-title-width42px横屏模式标题宽度
$un-signature-landscape-title-text-width300px横屏模式标题文本宽度
$un-signature-landscape-toolbar-padding10px横屏模式工具栏内边距
$un-signature-landscape-toolbar-width56px横屏模式工具栏宽度
$un-signature-landscape-toolbar-color-margin5px 0横屏模式颜色选择器间距
$un-signature-landscape-toolbar-left-margin-top15px横屏模式左侧工具栏顶部间距
$un-signature-landscape-toolbar-right-margin-bottom15px横屏模式右侧工具栏底部间距
$un-signature-landscape-toolbar-item-margin-left-50px横屏模式工具栏项左侧间距
$un-signature-landscape-toolbar-item-height90px横屏模式工具栏项高度
$un-signature-landscape-toolbar-color-list-margin-bottom10px横屏模式颜色列表底部间距
$un-signature-color-border-radius100px颜色选择器圆角

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档

Copyright © 2026 uView Next