更新记录

0.0.3（2023-11-09）

1. 签名组件增加真实背景功能，更新说明文档
2. 签名组件兼容微信8.0.14以下版本
3. 签名组件多触摸点绘画问题(高版本iphone辅助触摸)

0.0.2（2023-10-29）

1. 优化 easycom 支持。
2. 优化组件集成体积。
3. 更新说明文档内容。

0.0.1（2023-10-24）

0.0.1

xz-signature首次上架

平台兼容性

xz-signature

[toc]

一、使用说明

xz-signature 是基于 uniapp 框架的一款签名功能组件，组件干练简洁易用，只专注于移动端签名功能。

支持 easycom 导入，允许不导入组件直接使用。目前基于TS编写，暂未分离TS语法，需要项目支持TS依赖使用。

特点：

• 简单易用，仅需一个 v-model 属性即可实现主要功能。
• 自定义程度高，可根据具体需求，自定义 UI、内容。
• 画布签名均以 base64 转码输入输出，支持将已有签名回显嵌入画布内。。
• 单组件下载版本无需第三方依赖，开箱直用，若需要使用多个该系列组件，建议使用体积更小的完整组件包。

注意：组件属于首发测试阶段，使用过程中遇到问题或有建议的话请提交 Issues · xzcwx/xz-easy-uni (github.com)，感谢您的配合❤。

二、使用示例

1)、基本使用

<template>
    <view class="signature">
        <view class="signature-label">申请人签名</view>
        <xz-signature @save="signatureEvent" />
    </view>
</template>

<script lang="ts" setup>
    import { computed, reactive, onMounted } from "vue";

    const formOpts = reactive({
        model: {
            signature: ""
        }
    });

    function signatureEvent(base64: string) {
        formOpts.model.signature = base64;
    }
</script>

2)、搭配 v-model 使用

v-model 支持将已有的签名嵌入进画布中，注意签名必须是经过 base64 编码的图片，同时在点击保存后将同步新签名。

如果需要保存已有签名且禁用画布，请将 v-model 与 disable 属性搭配使用。

<template>
    <view class="signature">
        <view class="signature-label">申请人签名</view>
        <xz-signature landscape v-model="formOpts.model.signature" />
    </view>
</template>

<script lang="ts" setup>
    import { computed, reactive, onMounted } from "vue";

    const formOpts = reactive({
        model: {
            signature: "data:image/png;base64,............."
        }
    });
</script>

3)、手动保存与清空

正常情况下需要用户点击保存按钮的同时，base64 值才会通过组件往外抛出，若需要通过程序实现提交、定时、退出时自动保存这些操作的话，请使用组件方法。

<template>
    <view class="signature-1">
        <view class="signature-label">申请人签名</view>
        <xz-signature v-model="formOpts.model.signature1" 
                      :show-save-btn="false"
                      :show-clear-btn="false" />
    </view>
    <view class="signature-2">
        <view class="signature-label">处理人签名</view>
        <xz-signature v-model="formOpts.model.signature2"                                                 :show-save-btn="false"
                      :show-clear-btn="false" />
    </view>

    <button @click="submitEvent">提交</button>
</template>

<script lang="ts" setup>
    import { 
        computed, reactive, onMounted,
        type ComponentPublicInstance
    } from "vue";

    const $refs: Record<string, ComponentPublicInstance<any>> = reactive({
        signature1: null,
        signature2: null,
    });
    const formOpts = reactive({
        model: {
            signature1: "data:image/png;base64,.............",
            signature2: "data:image/png;base64,............."
        }
    });

    function submitEvent() {
        $refs.signature1?.saveEvent();
        $refs.signature2?.saveEvent();
    }
</script>

三、组件Props属性

四、组件Events

五、组件Slots

六、组件方法

七、注意事项

• 微信小程序 2d 画布模式下，微信开发者工具老版本可能存在一些显示上的错误，如画布优先级覆盖、占位符不显示等，这些在真机上都是不存在的，开发时请以真机为准！

便捷导航

• 作者博客地址：https://blog.csdn.net/XianZhe_
• 项目仓库地址：xzcwx/xz-easy-uni: 致力于简单易用的 UniApp ui库。 (github.com)