签名组件：uniapp 签名组件开发，兼容小程序、H5、App等 电子签名

描述

H5：1. 模拟横屏。2. 提示信息、模拟态也通过模拟横屏显示
小程序：1. 自动横屏展示

rn-signature 个性签名组件

组件名 rn-signature
签名组件兼容H5、小程序。横屏签名效果。

效果展示

h5端

小程序端

使用方式

1. 首先在插件市场进行下载
2. 引入

<view style="width: 100%;display: flex;justify-content: center;align-items: center; margin: 20px 0; flex-direction: column;">
	<rn-signature :options="options" :data="data" />
	<view style="margin: 10rpx;"></view>
	<rn-signature :options="options" :data="data1" />
</view>

3. 配置

<script>
export default {
	data() {
		return {
			options: {
				art:{
					enable: true,
				},
				clear:{
					show: true,
					slot: false,
					customClass: 'btn_clear_wrap'
				},
				placeholder: {
					content: '请设置个性签名',
				},
				style: { //设置签名容器宽高
					width: '600rpx',
					height: '300rpx',
					borderRadius: '20rpx'
				}
			},
			data: {
				url: '',//签名生成的图片地址。
			}
		}
	}
}
</script>

options 配置

clear配置项

自定义类名使用方式

::v-deep .btn_clear_wrap {
		
}

art配置项

placeholder 配置项

style 配置项

Slot 插槽

rn-signature 插件市场下载安装

1. 工具->插件安装->前往插件市场安装
   
2. 全部->搜索->rn-signature
   
3. 下载插件并导出HBuilderX
   4. 点击注册
   

测试用例

<template>
	<view class="sub_car_polling">
		<view style="width: 100%;display: flex;justify-content: center;align-items: center; margin: 20px 0; flex-direction: column;">
			<rn-signature :options="options" :data="data" />
			<view style="margin: 10rpx;"></view>
			<rn-signature :options="options" :data="data1"></rn-signature>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {
					clear: {
						show: true,
						slot: false,
						customClass: 'btn_clear_wrap'
					},
					placeholder: {
						content: '请设置个性签名',
					},
					style: { //设置签名容器宽高
						width: '600rpx',
						height: '300rpx',
						border: 'none',
						'box-shadow': '0px 0px 5px rgba(0, 0, 0, 0.4)'
					}
				},
				data: {
					url: ''
				},
				data1: {
					url: ''
				}
			};
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.sub_car_polling {}

	::v-deep .btn_clear_wrap {}
</style>

效果图