更新记录

1.0.0（2025-09-07） 下载此版本

初次发布

平台兼容性

uni-app(4.11)

uni-app x(4.11)

wt-sign

签名组件

WtSign 是一个纯粹的签名组件，支持横屏/竖屏两种模式，可生成 PNG/JPG 格式的签名图片。

签名界面需自行根据需求实现。

使用

组件跟随父容器的宽高尺寸。

基础用法

<view class="sign-view" style="width: 100%; height: 300rpx;">
    <wt-sign
        ref="signRef"
        direction="horizontal"
        @complete="handleSignComplete"
    />
</view>

API

Props

Events

Methods

使用示例

<template>
    <view>
        <view class="sign-view">
            <wt-sign
                ref="wtSign"
                @complete="handleSignComplete"
                :beforeGenerate="beforeGenerate"
            />
        </view>
        <button @click="handleSign">sign</button>
        <button @click="handleSignClear">clear</button>

        <view>签名结果：</view>
        <image
            :src="signImgUrl"
            mode="aspectFit"
            style="width: 100%"
        ></image>
        <image
            :src="signImgUrl"
            mode="aspectFill"
            style="width: 100%"
        ></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                signImgUrl: "",
            };
        },
        methods: {
            beforeGenerate(points, direction) {
                console.log('beforeGenerate', points, direction);

                if(!points.length) {
                    uni.showToast({
                        title: '请先签名',
                        icon: "none",
                    })
                    return false;
                }
                return true;

                // Promise 形式
                // return new Promise((resolve,reject) => {
                //  setTimeout(() => {
                //      resolve(true)
                //  }, 600)
                // })

            },
            handleSign() {
                this.$refs.wtSign.generateImage();
            },
            handleSignClear() {
                this.$refs.wtSign.clear();
            },
            handleSignComplete(url) {
                this.signImgUrl = url;
                this.handleStreamUpload(url);
            },
            // 示例上传
            handleStreamUpload(tempFilePath) {
                uni.uploadFile({
                    url: 'https://kieai.redpandaai.co/api/file-stream-upload',
                    filePath: tempFilePath,
                    formData: {
                        name: "image",
                    },
                    header: {
                        'Content-Type': 'multipart/form-data'
                    },
                    name: 'file',
                    success: (res) => {
                        console.log('上传成功:', res);
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
.sign-view{
    width: 100%;
    height: 300rpx;
}
</style>