描述

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>

效果圖