Signature サイン - Vant 4

✍️ Signature サイン

🎯 紹介

署名シーン向けのコンポーネント。Canvas ベースで実装され、手書き署名・電子署名などに対応します。ご利用には vant を 4.3.0 以上にアップグレードしてください。

📦 導入

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

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

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

🎯 コード例

✍️ 基本用法

確認ボタンをクリックすると submit イベントが発火します。最初の引数 data には次のフィールドが含まれます：

• image：署名画像（base64 文字列）。署名が空の場合は空文字列。
• canvas：Canvas 要素。

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

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const image = ref('');
    const onSubmit = (data) => {
      image.value = data.image;
    };
    const onClear = () => showToast('署名を消去しました');
    return { image, onSubmit, onClear };
  },
};
</script>

🎨 ペンの色をカスタマイズ

pen-color でペンの色をカスタマイズできます。

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const onSubmit = (data) => {
      console.log('署名データ:', data);
    };
    return { onSubmit };
  },
};
</script>

📏 線の太さをカスタマイズ

line-width で線の太さをカスタマイズします。

<template>
  <van-signature :line-width="5" @submit="onSubmit" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const onSubmit = (data) => {
      console.log('署名データ:', data);
    };
    return { onSubmit };
  },
};
</script>

🎨 背景色をカスタマイズ

background-color で背景色を設定し、異なる雰囲気を演出できます。

<template>
  <van-signature background-color="#f0f0f0" @submit="onSubmit" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const onSubmit = (data) => {
      console.log('署名データ:', data);
    };
    return { onSubmit };
  },
};
</script>

📋 API

🎛️ Props

属性名	説明	型	デフォルト
type	📸 画像の出力形式	string	png
pen-color	🎨 ペンの色（デフォルト黒）	string	#000
line-width	📏 線の太さ	number	3
background-color	🎨 背景色	string	-
tips	💡 Canvas 非対応時に表示するヒント文言	string	-
clear-button-text	🗑️ クリアボタン文言	string	清空
confirm-button-text	✅ 確認ボタン文言	string	确认

🎪 Events

イベント名	説明	コールバック引数
start	🚀 署名開始時に発火	-
end	🏁 署名終了時に発火	-
signing	✍️ 署名中に発火	event: TouchEvent
submit	✅ 確認ボタンをクリック時に発火	data: { image: string; canvas: HTMLCanvasElement }
clear	🗑️ クリアボタンをクリック時に発火	-

🎭 Slots

名称	説明	パラメータ
tips	💡 ヒント文言のカスタマイズ	-

🔧 メソッド

ref で Signature インスタンスを取得し、インスタンスメソッドを呼び出せます。詳細はコンポーネントインスタンスのメソッドを参照してください。

メソッド名	説明	引数	戻り値
resize v4.7.3	🔄 外側要素のサイズや表示状態が変化したときに再描画をトリガー	-	-
clear v4.8.6	🗑️ 署名をクリアします	-	-
submit v4.8.6	✅ submit イベントを発火（確認ボタンと同等）	-	-

📘 型定義

コンポーネントは以下の型定義をエクスポートし、TypeScript プロジェクトでの利用を容易にします：

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 コンポーネント を参照してください。

名称	デフォルト値	説明
--van-signature-padding	var(--van-padding-xs)	📦 署名コンポーネントの内側余白
--van-signature-content-height	200px	📏 署名領域の高さ
--van-signature-content-background	var(--van-background-2)	🎨 署名領域の背景色
--van-signature-content-border	1px dotted #dadada	🖼️ 署名領域の枠線スタイル

📚 関連ドキュメント

🎨 描画コンポーネント

📝 フォームコンポーネント

• Field - 入力欄コンポーネント。テキスト入力に使用
• Form - フォームコンポーネント。データ収集・検証に使用

🎭 レイヤーコンポーネント

• Popup - ポップアップコンポーネント。署名ダイアログなどに利用
• Dialog - ダイアログコンポーネント。確認操作に利用

🔧 ツールコンポーネント

• ConfigProvider - グローバル設定コンポーネント。テーマカスタマイズに利用
• Toast - トースト。操作フィードバックに利用