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

描述

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>

效果图

谷歌浏览器下载