SignBoard 签名板

此组件用于在页面中显示一个签名板，支持多种样式的签名板。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

<template>
	<view class="fu-m-x-30 fu-p-y-40">
		<view class="fu-flex fu-flex-direction-column fu-flex-col-center fu-flex-row-center fu-b-r-30 fu-container fu-p-30">
			<view class="image">
				<image v-if="imageSrc" :src="imageSrc" mode="heightFix"></image>
			</view>
		</view>
		
		<view class="fu-m-t-60">
			<view class="">
				<view class="fu-flex fu-flex-column-center fu-flex-row-center fu-text-c">
					<view class="content-left-line"></view>
					<view class="content-text">笔画颜色</view>
					<view class="content-right-line"></view>
				</view>
				
				<view class="fu-container fu-flex fu-gap-30 fu-m-t-30 fu-p-30 fu-p-y-40">
					<fu-button width="100%" @click="colorChange(0)">默认</fu-button>
					<fu-button width="100%" type="warning" @click="colorChange(1)">自定义</fu-button>
				</view>
			</view>
			
			<view class="fu-m-t-40">
				<view class="fu-flex fu-flex-column-center fu-flex-row-center fu-text-c">
					<view class="content-left-line" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);"></view>
					<view class="content-text" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);">旋转签名</view>
					<view class="content-right-line" style="background-image: repeating-linear-gradient(45deg, #E72F8C, #892FE8);"></view>
				</view>
				
				<view class="fu-container fu-flex fu-gap-30 fu-m-t-30 fu-p-30 fu-p-y-40">
					<fu-button width="100%" type="success" @click="rotateChange(0)">不旋转</fu-button>
					<fu-button width="100%" type="error" @click="rotateChange(1)">旋转</fu-button>
				</view>
			</view>
		</view>
		
		<fu-sign-board :show="show" :customBarHeight="customBarHeight" :signSelectColor="signSelectColor" :rotate="rotate" @save="saveSign" @close="closeSign"></fu-sign-board>
	</view>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	
	// data数据
	let show = ref(false);
	let signSelectColor = reactive(['#080808', '#E83A30']);
	let rotate = ref(true);
	let imageSrc = ref('');
	let colorIndex = ref(0);
	let rotateIndex = ref(1);
	
	// computed计算属性
	const customBarHeight = computed(() => {
		let value;
		
		// #ifndef H5
		value = 0;
		// #endif
		// #ifdef H5
		value = uni.getSystemInfoSync().statusBarHeight + 44;
		// #endif
		
		return value
	});
	
	// methods函数
	// 弹出SignBoard
	const showSignBoard = () => {
		show.value = true;
	};
	
	// 切换画笔颜色
	const colorChange = (e) => {
		colorIndex.value = e;
		switch (e) {
			case 0:
				signSelectColor.length = 0;
				Object.assign(signSelectColor, ['#080808', '#E83A30'])
				break
			case 1:
				signSelectColor.length = 0;
				Object.assign(signSelectColor, ['#838383', '#01BEFF'])
				break
		}
		showSignBoard()
	};
	
	// 切换旋转内容
	const rotateChange = (e) => {
		rotateIndex.value = e;
		rotate.value = e === 0? false: true;
		showSignBoard()
	};
				
	// 保存签名
	const saveSign = (e) => {
		imageSrc.value = e;
		show.value = false;
	};
	
	// 关闭签名板
	const closeSign = () => {
		show.value = false;
	};
</script>

<style lang="scss" scoped>
	.image {
	    height: 200rpx;
	    
		image {
			height: 200rpx;
		}
	}
	
	.fu-container {
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
	}
	
	.content-left-line, .content-right-line {
		width: 52px;
		height: 1px;
		position: relative;
		background-image: repeating-linear-gradient(45deg, #E83A30, #E72F8C);
	}
	
	.content-left-line::after {
		content: '';
		background: inherit;
		width: 6px;
		height: 6px;
		position: absolute;
		top: -6px;
		right: 0px;
		border-radius: 50%;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	
	.content-right-line::after {
		content: '';
		background: inherit;
		width: 6px;
		height: 6px;
		position: absolute;
		top: -6px;
		left: 0px;
		border-radius: 50%;
		-webkit-transform: translateY(50%);
		transform: translateY(50%);
	}
	
	.content-text {
		-webkit-background-clip: text;
		color: transparent;
		min-width: 64px;
		height: 18px;
		font-size: 16px;
		line-height: 1;
		margin: 0 18px;
		background-image: repeating-linear-gradient(45deg, #E83A30, #E72F8C);
	}
</style>

API

SignBoard Props

属性名	说明	类型	默认值	可选值
show	是否显示	Boolean	false	true
signSelectColor	签名颜色	Array	['#060606', '#ec3930']	-
rotate	是否旋转输出图片	Boolean	true	false
customBarHeight	自定义状态栏的高度	Number｜String	0	-

SignBoard Events

事件名	说明	回调参数
save	保存时触发回调	() => void
close	关闭时触发回调	() => void