はじめる

インストール

npm

npm install vue-otp-pro

pnpm

pnpm add vue-otp-pro

yarn

yarn add vue-otp-pro

クイックスタート

コンポーネントとスタイルをインポートします：

<script setup lang="ts">
import { ref } from 'vue'
import { OtpInput } from 'vue-otp-pro'
import 'vue-otp-pro/dist/vue-otp-pro.css'

const otp = ref('')

function handleComplete(value: string) {
  console.log('OTP入力完了:', value)
}
</script>

<template>
  <OtpInput v-model="otp" @complete="handleComplete" />
</template>

お試しください：

ライブプレビュー

グローバル登録

import { createApp } from 'vue'
import { VueOtpPro } from 'vue-otp-pro'
import 'vue-otp-pro/dist/vue-otp-pro.css'

const app = createApp(App)
app.use(VueOtpPro)
app.mount('#app')

依存関係

Vue OTP Pro は Vue 3.3+ をピア依存関係として必要とします。

次のステップ

• Props とイベント — 完全なAPIリファレンス
• テーマ — 11テーマ、CSSカスタムプロパティ、ダークモード
• ライブデモ — インタラクティブプレイグラウンド