签名板 Signature Pad

#基础用法

signature-pad/basic Vue React

Sign below

signature-pad/basic.vue

<script setup lang="ts">
import { rotate_ccw } from "@bysages/icons";
import { Icon, SignaturePad } from "@bysages/vue";
</script>

<template>
  <SignaturePad.Root>
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>
        <Icon :glyph="rotate_ccw" />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
    <SignaturePad.HiddenInput />
  </SignaturePad.Root>
</template>

#属性

#ClearTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Guide

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

属性	类型	默认值	描述
`value`	`string`		—

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`defaultPaths`	`string[]`		签名板的默认路径
`disabled`	`boolean`		签名板是否禁用
`drawing`	`signaturePad.DrawingOptions`	`'{ size: 2, simulatePressure: true }'`	绘制选项
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; control: string; hiddenInput: string; label: string; }>`		签名板各元素的 id，适合组合使用
`name`	`string`		签名板的 `name`，用于表单提交
`paths`	`string[]`		签名板的受控路径
`readOnly`	`boolean`		签名板是否只读
`required`	`boolean`		签名板是否必填
`translations`	`signaturePad.IntlTranslations`		签名板的本地化文案，用于国际化

#Segment

纯造型的部件——自身没有属性，沿用部件结构的共享样式。