你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

反馈组件

签名画板 TmSignBoard

通用签名画板组件，支持手写签名功能。

🌶️ 示例

查看模拟效果－

示例模板

<!--
  - Copyright (c) 2025. tmzdy by @https://tmui.design
  -->
<script setup lang="ts">
import { ref } from 'vue'
const signBoardRef = ref(null)
const getimage = async ()=>{
	let org = await signBoardRef.value?.getImage();
	uni.previewImage({
		urls:[org.src],
		current:org.src
	})
}
const clear = async ()=>{
	await signBoardRef.value?.clear();
}

</script>

<template>
    <view>
        <tm-sheet>
            <tm-text font-size="32" class=" text-weight-b  d-block">签名版 TmSignBoard</tm-text>
        </tm-sheet>

        <tm-sheet >
            <tm-sheet width="660" height="660" padding="0" margin="0" color="info">
				<tm-sign-board ref="signBoardRef" width="660" height="660"></tm-sign-board>
			</tm-sheet>
			
			<view class="pa-12 flex flex-row gap-10 mt-n8">
				<tm-button @click="clear" class="flex-1">清空</tm-button>
				<tm-button @click="getimage" class="flex-1">获取图片</tm-button>
			</view>
        </tm-sheet>

    </view>

</template>

<style scoped></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
strokeColor	string	''	线颜色
backgroundColor	string	''	线颜色
strokeWidth	union	8	线宽
width	union	300	画布宽和高，不允许%，只能是数字或者带单位的数字如:4,'4',20px,750rpx
height	union	300	画布宽和高，不允许%，只能是数字或者带单位的数字如:4,'4',20px,750rpx

🌹 事件

事件名	参数	返回数据	描述

🌽 slot插槽

插槽名	数据	描述

🥗 ref方法

方法名	参数	返回值	描述
clear	-	-	清空画布
getImage	-	-	获取签名图片