Signature 签名

介绍

签名组件用于签名场景，基于 Canvas 实现，支持自定义线条颜色、宽度和背景色等。

导入

import Signature from '@/components/form/Signature.vue';

使用方法

基础用法

签名组件的基础用法，可通过 ref 调用组件方法。

<template>
  <Signature ref="signatureRef" />
  <FlexRow :padding="10" :gap="10">
    <Button round size="small" text="清空" @click="signatureRef?.clear()" />
    <Button round size="small" type="primary" text="确定" @click="previewResult(signatureRef)" />
  </FlexRow>
</template>

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import type { SignatureInstance } from '@/components/form/Signature.vue';
import Signature from '@/components/form/Signature.vue';
import { ref } from 'vue';

const signatureRef = ref<SignatureInstance>();

function previewResult(ref: SignatureInstance|undefined) {
  if (ref) {
    uni.showLoading();
    ref.export().then((res) => {
      uni.previewImage({
        urls:[res],
      })
    }).catch((e) => {
      uni.showToast({
        title: e.message,
        icon: 'none',
      })
    }).finally(() => {
      uni.hideLoading();
    });
  }
}
</script>

自定义线条颜色

通过 lineColor 属性自定义签名线条颜色。

<template>
  <Signature ref="signatureRef" lineColor="#f00" />
  <FlexRow :padding="10" :gap="10">
    <Button round size="small" text="清空" @click="signatureRef?.clear()" />
    <Button round size="small" type="primary" text="确定" @click="previewResult(signatureRef)" />
  </FlexRow>
</template>

自定义线条宽度

通过 lineWidth 属性自定义签名线条宽度。

<template>
  <Signature ref="signatureRef" :lineWidth="5" />
  <FlexRow :padding="10" :gap="10">
    <Button round size="small" text="清空" @click="signatureRef?.clear()" />
    <Button round size="small" type="primary" text="确定" @click="previewResult(signatureRef)" />
  </FlexRow>
</template>

自定义背景颜色

通过 backgroundColor 属性自定义签名背景颜色。

<template>
  <Signature ref="signatureRef" backgroundColor="#000" lineColor="#fff" />
  <FlexRow :padding="10" :gap="10">
    <Button round size="small" text="清空" @click="signatureRef?.clear()" />
    <Button round size="small" type="primary" text="确定" @click="previewResult(signatureRef)" />
  </FlexRow>
</template>

API 参考

Signature

签名组件，用于用户手写签名。

Props

名称	说明	类型	必填	默认值
backgroundColor	签名背景颜色	string	否	white
lineColor	签名线条颜色	string	否	black
lineWidth	签名线条宽度	number	否	3
round	是否显示圆角	boolean	否	true
border	是否显示边框	boolean	否	true
borderWidth	边框宽度	number	否	2
borderColor	边框颜色	string	否	border.cell

Methods

名称	说明	参数	返回值	描述
clear	清空签名内容	-	void	清空当前画布上的所有签名内容
export	导出签名为图片	-	Promise<string>	导出签名为临时图片路径

主题变量

名称	类型	默认值	说明
SignatureBackgroundColor	string	white	签名背景颜色
SignatureLineColor	string	black	签名线条颜色
SignatureLineWidth	number	3	签名线条宽度
SignatureRound	boolean	true	是否显示圆角
SignatureBorder	boolean	true	是否显示边框
SignatureBorderWidth	number	2	边框宽度
SignatureBorderColor	string	border.cell	边框颜色
SignatureBorderRadius	number	12	边框圆角大小