PasswordInput パスワード入力ボックス - Vant 4

🔐 PasswordInput パスワード入力ボックス

🎯 紹介

PasswordInput コンポーネントはグリッド付きの入力ボックスコンポーネントで、パスワードやSMS検証コードの入力などの場面で使用できます。通常はナンバーキーボードコンポーネントと組み合わせて使用します。パスワード入力をより安全かつ簡単にします！

📦 導入

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

import { createApp } from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';

const app = createApp();
app.use(PasswordInput);
app.use(NumberKeyboard);

🎯 コード例

🔧 基本的な使い方

ナンバーキーボードコンポーネントと組み合わせてパスワード入力機能を実装します。安全なデジタル金庫のようなものです 🔒

html

<template>
  <div class="demo-password-basic">
    <van-password-input
      :value="value"
      info="パスワードは6桁の数字"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="input-info">現在の入力：{{ value }}</p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('123');
    const showKeyboard = ref(true);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
        if (value.value.length === 6) {
          showToast('パスワード入力完了 ✅');
        }
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-basic {
  padding: 20px;
}
.input-info {
  margin-top: 15px;
  text-align: center;
  color: #666;
}
</style>

📏 カスタム長さ

length 属性でパスワードの長さを設定し、さまざまなセキュリティ要件に対応します 🎯

html

<template>
  <div class="demo-password-length">
    <van-password-input
      :value="value"
      :length="4"
      info="4桁のパスワードを入力してください"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="length-info">4桁パスワードモード</p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 4) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-length {
  padding: 20px;
}
.length-info {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
}
</style>

グリッド間隔

gutter 属性でグリッド間の間隔を設定し、入力ボックスにより層がある外観を与えます 📐

html

<template>
  <div class="demo-password-gutter">
    <van-password-input
      :value="value"
      :gutter="10"
      info="グリッド間隔は10px"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="gutter-info">間隔によって入力がより明確になります ✨</p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-gutter {
  padding: 20px;
}
.gutter-info {
  margin-top: 10px;
  text-align: center;
  color: #1989fa;
}
</style>

平文表示

mask を false に設定すると入力内容を平文で表示できます。SMS検証コードなどの場面に適しています 📱

html

<template>
  <div class="demo-password-mask">
    <van-password-input
      :value="value"
      :mask="false"
      info="検証コードは平文表示"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="mask-info">検証コードモード：{{ value }}</p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('');
    const showKeyboard = ref(false);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    return {
      value,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-mask {
  padding: 20px;
}
.mask-info {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
</style>

ヒント情報

info 属性でヒント情報を設定し、error-info 属性でエラーヒントを設定します。例えば、6桁を入力した際にパスワードエラーを表示するなど ⚠️

html

<template>
  <div class="demo-password-info">
    <van-password-input
      :value="value"
      :info="errorInfo ? '' : '6桁のパスワードを入力してください'"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      v-model:show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <p class="info-status">
      ステータス：{{ errorInfo ? '❌ エラー' : '✅ 正常' }}
    </p>
  </div>
</template>

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

export default {
  setup() {
    const value = ref('123');
    const errorInfo = ref('');
    const showKeyboard = ref(true);
    
    const onInput = (key) => {
      if (value.value.length < 6) {
        value.value += key;
      }
    };
    
    const onDelete = () => {
      value.value = value.value.slice(0, -1);
    };
    
    watch(value, (newVal) => {
      if (newVal.length === 6 && newVal !== '123456') {
        errorInfo.value = 'パスワードが間違っています。再入力してください';
        showToast('パスワードが間違っています ❌');
      } else {
        errorInfo.value = '';
        if (newVal.length === 6) {
          showToast('パスワードが正しいです ✅');
        }
      }
    });
    
    return {
      value,
      errorInfo,
      showKeyboard,
      onInput,
      onDelete
    };
  },
};
</script>

<style>
.demo-password-info {
  padding: 20px;
}
.info-status {
  margin-top: 15px;
  text-align: center;
  font-weight: bold;
}
</style>

API

プロパティ

パラメータ	説明	型	デフォルト値
value	パスワードの値、入力ボックスの内容を制御 🔐	string	`''`
info	入力ボックスの下のテキストヒント、ユーザーに友好的なガイダンスを提供 💡	string	-
error-info	入力ボックスの下のエラーヒント、エラーメッセージを表示 ⚠️	string	-
length	パスワードの最大長、入力ボックスのグリッド数を定義 📏	number \| string	`6`
gutter	入力ボックスのグリッド間の間隔、例：`20px` `2em`、デフォルトの単位は`px` 📐	number \| string	`0`
mask	パスワードの内容を非表示にするかどうか、プライバシーを保護 👁️	boolean	`true`
focused	フォーカスが当たっているかどうか、フォーカス時にカーソルが表示される 🎯	boolean	`false`

イベント

イベント名	説明	コールバック引数
focus	入力ボックスがフォーカスを得たときにトリガー、入力開始状態 🎯	-

型定義

コンポーネントは以下の型定義をエクスポートします：

import type { PasswordInputProps } from 'vant';

テーマカスタマイズ

スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名前	デフォルト値	説明
--van-password-input-height	50px	入力ボックスの高さ 📏
--van-password-input-margin	0 var(--van-padding-md)	外側の余白 📐
--van-password-input-font-size	20px	フォントサイズ ✏️
--van-password-input-radius	6px	角丸のサイズ 🔘
--van-password-input-background	var(--van-background-2)	背景色 🎨
--van-password-input-info-color	var(--van-text-color-2)	ヒントテキストの色 💡
--van-password-input-info-font-size	var(--van-font-size-md)	ヒントテキストのサイズ 📝
--van-password-input-error-info-color	var(--van-danger-color)	エラーヒントの色 ⚠️
--van-password-input-dot-size	10px	パスワードのドットサイズ 🔴
--van-password-input-dot-color	var(--van-text-color)	パスワードのドットの色 ⚫
--van-password-input-text-color	var(--van-text-color)	テキストの色 ✏️
--van-password-input-cursor-color	var(--van-text-color)	カーソルの色 📍
--van-password-input-cursor-width	1px	カーソルの幅 📏
--van-password-input-cursor-height	40%	カーソルの高さ 📐
--van-password-input-cursor-duration	1s	カーソルアニメーションの期間 ⏱️

📚 関連文書

NumberKeyboard ナンバーキーボード - 数字入力キーボード、パスワード入力の最適なパートナー ⌨️
Field 入力ボックス - 汎用入力ボックスコンポーネント 📝
Form フォーム - フォーム検証と送信 📋
Toast トースト - 操作フィードバックヒント 💬
Dialog ダイアログ - 確認とヒントポップアップ 💭
ConfigProvider グローバル設定 - グローバル設定コンポーネントテーマ 🎛️

🔐 PasswordInput パスワード入力ボックス ​

🎯 紹介 ​

📦 導入 ​

🎯 コード例 ​

🔧 基本的な使い方 ​

📏 カスタム長さ ​

グリッド間隔 ​

平文表示 ​

ヒント情報 ​

API ​

プロパティ ​

イベント ​

型定義 ​

テーマカスタマイズ ​

スタイル変数 ​

📚 関連文書 ​

🔐 PasswordInput パスワード入力ボックス

🎯 紹介

📦 導入

🎯 コード例

🔧 基本的な使い方

📏 カスタム長さ

グリッド間隔

平文表示

ヒント情報

API

プロパティ

イベント

型定義

テーマカスタマイズ

スタイル変数

📚 関連文書