更新记录

1.0.3（2025-06-24） 下载此版本

• 添加艺术字功能，通过配置 art 进行配置

1.0.2（2025-06-24） 下载此版本

• 清除签名功能添加，通过配置 options.clear.show 进行控制 清除按钮的显示与隐藏。
• 清除按钮插槽功能添加，通过配置 slot 和 自定义样式，设置自己喜欢的展示方式。

1.0.0（2025-06-23） 下载此版本

首次提交

平台兼容性

uni-app

rn-signature 个性签名组件

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

效果展示

• h5端

• 小程序端

使用方式

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

   <template>
   <rn-signature :options="options" :data="data" />
   </template>

3. 配置

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

options 配置

clear配置项

自定义类名使用方式

::v-deep .btn_clear_wrap {

}

art配置项

placeholder 配置项

style 配置项

Slot 插槽

测试用例

<!-- 拼车模块-首页 -->
<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>

效果图