封装一个uniapp 签名功能插件。兼容 H5、APP、小程序。模拟横屏签名。

描述

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

rn-signature 个性签名组件

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

效果展示

h5端

---

小程序端

APP 端

使用方式

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	清除按钮相关配置项	Object	clear配置项	-
placeholder	占位符提示信息，	Object	placeholder配置项	-
style	个性签名样式配置项	Object	style配置项	-
art	艺术字	Object	art配置项	-

---

clear配置项

属性	说明	类型	默认值	可选值
show	是否显示清除按钮	Boolean	true	-
slot	清除按钮插槽，名称“clearSlot”	Boolean	false	-
customClass	自定义类名，需配合slot 使用	String	btn_clear_wrap	-

::v-deep .btn_clear_wrap {
		
}

---

art配置项

属性	说明	类型	默认值	可选值
enable	是否启用	Boolean	false	-

---

placeholder 配置项

属性	说明	类型	默认值	可选值
content	提示内容	String	请设置个性签名	-
fontSize	字体大小	Number	40	-
textBaseline	字体对其方式	String	middle	-
textAlign	对其方式	String	center	-
fillStyle	字体颜色	String	#888	-

---

style 配置项

属性	说明	类型	默认值	可选值
width	宽度	String	100%	-
height	高度	String	300rpx	-
background	背景色	String	#fff	-
border	边框	String	1px solid	-
borderRadius	圆角	String	20rpx	-
--其他样式属性都可以	---	----	---	----

---

Slot 插槽

名称	说明
clearSlot	清除按钮插槽，用于清除生成好的签名图片

rn-signature 插件市场下载安装

• 地址：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>

效果图