签名组件：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	清除按钮相关配置项	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 插件市场下载安装

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>

效果图