更新记录

1.2.2（2025-08-01） 下载此版本

• 画笔宽度配置。
• 文档内容补充：1. 画笔宽度配置。1.vue2 的 h5/小程序兼容测试（其他平台未知----）

1.2.1（2025-07-17） 下载此版本

• 优化 清除下控制台警告，避免使用者以为 警告为报错

1.2.0（2025-07-15） 下载此版本

• 兼容 uniappx H5
• 兼容 uniappx 小程序
• 兼容 uniappx 鸿蒙环境（模拟机测试的）

平台兼容性

uni-app

uni-app x

其他

上来直接差评的就别提问了，你应该指点江山去，相信你自己。

上来直接差评的就别提问了，你应该指点江山去，相信你自己。

上来直接差评的就别提问了，你应该指点江山去，相信你自己。

===========================================================================================

rn-signature 个性签名组件

组件名 rn-signature 签名组件兼容 H5、APP、小程序。模拟横屏签名效果。 兼容鸿蒙 APP 横屏（使用的模拟器：devecostudio 版本为 5.1.1，hbuilder x 版本为 4.66）

========================================

注意：vue2 只测试了 h5 和 小程序， 其他的平台没测试。

效果展示

• h5 端

• 小程序端

• APP 端

• 鸿蒙展示效果

使用方式

1. 首先在插件市场进行下载 地址：rn-signature
2. 引入

# vue3用法
<template>
    <rn-signature :options="options" :data="data" />
</template>

# vue2 用法
<template>
    <rn-signature :options="options" :data.sync="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 配置项

btn 按钮配置

• order 排序
• content 按钮内容
• style 按钮样式

ctx 按钮配置

• order 排序
• content 按钮内容
• style 按钮样式

Slot 插槽

测试用例

<template>
    <view class="test_container">
        <!-- 测试一 -->
        <rn-signature :options="options" :data="data" />
        <view style="margin: 20rpx;"></view>
        <!-- 测试二 -->
        <rn-signature :options="options" :data="data1" />
        <view style="margin: 20rpx;"></view>
        <button @click="uploadClick">上传</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                options: {
                    // art: {//可选配置-艺术字设置
                    //  enable: true,
                    // },
                    // clear: {//可选配置-清除按钮设置
                    //  show: true,
                    //  slot: false,
                    //  customClass: 'btn_clear_wrap'
                    // },
                    // placeholder: {//可选配置-默认提示信息设置
                    //  content: '请设置个性签名',
                    // },
                    // btn: {//可选配置-画布中三个按钮设置
                    //  saveBtn: {
                    //      order: 1,
                    //      content: '保存',
                    //      style: {
                    //          border: '3px solid #00ffff'
                    //      }
                    //  },
                    //  resetBtn: {
                    //      order: 2,
                    //      content: '重绘',
                    //  },
                    //  cancelBtn: {
                    //      order: 1,
                    //  }
                    // },
                    style: { //设置签名容器宽高-一般都会设置下样式，配合自己的业务。
                        width: '600rpx',
                        height: '300rpx',
                        border: 'none',
                        'box-shadow': '0px 0px 5px rgba(0, 0, 0, 0.4)'
                    },
                },
                data: {
                    url: ''
                },
                data1: {
                    url: ''
                }
            };
        },
        methods: {
            /**
             * 简单的测试上传功能
             */
            uploadClick() {
                uni.uploadFile({
                    /**
                     * 小程序 和 APP端 ---- 正常上传 以  url: http://192.168.84.163:3000 为例
                     */
                    // #ifdef MP-WEIXIN || APP-PLUS
                    url: 'http://192.168.29.163:3000/file-service/upload',
                    // #endif

                    /**
                     * h5 端 走 vue.config.js 或 vite.config.js 中的代理
                     */
                    // #ifndef MP-WEIXIN || APP-PLUS
                    url: '/api/file-service/upload',
                    // #endif
                    header: {
                        'content-type': 'multipart/form-data'
                    },
                    formData: {
                        userId: '123'
                    }, // 避免与name字段冲突
                    filePath: this.data.url,
                    name: 'file',
                    success(res) {
                        console.log('上传成功：', res)
                    },
                    fail(err) {
                        console.log('上传失败：', err)
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .test_container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
        flex-direction: column;
        padding: 20rpx
    }

    ::v-deep .btn_clear_wrap {}
</style>

# vue.config.js 或 vite.config.js 中的代理配置
proxy: {
    '/api': {
        target: 'http://192.168.84.163:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')  // 路径重写（可选）
    }
}

效果图

使用 uvue 页面：H5、小程序 使用 uts 文件： H5、小程序