引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Signature } from 'vant';

const app = createApp();
app.use(Signature);

基础用法

当点击确认按钮时，组件会触发 submit 事件，事件的第一个参数为 data，包含以下字段：

• image：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
• canvas：Canvas 元素。

<van-signature @submit="onSubmit" @clear="onClear" />
<van-image v-if="image" :src="image" />

import { ref } from 'vue';
import { showToast } from 'vant';

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

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

自定义颜色

通过 pen-color 来自定义笔触颜色。

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

自定义线宽

通过 line-width 来自定义线条宽度。

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

自定义背景颜色

通过 background-color 来自定义背景颜色。

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

Props

Events

Slots

方法

通过 ref 可以获取到 Signature 实例并调用实例方法，详见组件实例方法。

类型定义

组件导出以下类型定义：

import type { SignatureProps, SignatureInstance } from 'vant';

SignatureInstance 是组件实例的类型，用法如下：

import { ref } from 'vue';
import type { SignatureInstance } from 'vant';

const signatureRef = ref<SignatureInstance>();

signatureRef.value?.resize();

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。