Press UI

# Signature 签名

Component for signature scene, based on Canvas.

# Usage

# Basic Usage

When the confirm button is clicked, the component will emit the submit event. The first parameter of the event is data, which contains the following fields:

  • image: The image corresponding to the signature, which is in base64 string format. Returns an empty string if the signature is empty.
  • canvas: The Canvas element.
<press-signature @submit="onSubmit" @clear="onClear" />
<press-image v-if="image" :src="image" />

import { ref } from 'vue';

export default {
  setup() {
    const image = ref('');
    const onSubmit = (data) => {
      image.value = data.image;
    };
    const onClear = () => {};

    return {
      image,
      onSubmit,
      onClear,
    };
  },
};

# Pen Color

Use pen-color prop to set the color of the brush stroke.

<press-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />

# Line Width

Use line-width prop to set the width of the line.

<press-signature :line-width="6" @submit="onSubmit" @clear="onClear" />

# Background Color

Use background-color prop to set the color of the background.

<press-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />

# API

# Props

Parameter Description Type Default
type Export image type string png
pen-color Color of the brush stroke, default is black string #000
line-width Width of the line number 3
background-color Background color string -
tips Text that appears when Canvas is not supported string -
clear-button-text Clear button text string Clear
confirm-button-text Confirm button text string Confirm

# Events

Event Name Description Callback Parameters
start Emitted when signing starts -
end Emitted when signing ends -
signing Emitted when signing event: TouchEvent
submit Emitted when clicking the confirm button data: { image: string; canvas: HTMLCanvasElement }
clear Emitted when clicking the cancel button -

# Methods

Use ref (opens new window) to get Signature instance and call instance methods.

Name Description Attribute Return value
resize Resize Signature when container element resized or visibility changed - -
clear Can be called to clear the signature - -
submit Trigger the submit event, which is equivalent to clicking the confirm button. - -

# Theming

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name Default Value Description
--press-signature-padding var(--press-padding-xs) -
--press-signature-content-height 200px Height of the canvas
--press-signature-content-background var(--press-background-2) Background color of the canvas
--press-signature-content-border 1px dotted #dadada Border style of the canvas
横屏

← Slider →