Vue3 Number Plate

Vue3 Number Plate は、日本のナンバープレートを簡単に表示・カスタマイズできる Vue3 コンポーネントです。

Installation

npm install @zygapp/vue3-number-plate

Usage

<template>
  <VNumberPlate v-model="numberPlate" color="white" />
</template>

<script setup>
import { ref } from "vue";
import { VNumberPlate } from "@zygapp/vue3-number-plate";
import "@zygapp/vue3-number-plate/style.css";

const numberPlate = ref("品川 300 ぬ 12-34");
</script>

Images

| color="white" | color="yellow" | color="green" | color="black" | |:-:|:-:|:-:|:-:| |||||

Props

| プロパティ名 | 型 | デフォルト値 | 説明 | | ------------ | --------- | ------------ | ------------------------------------------------------------ | | modelValue | String | '' | ナンバープレートの値 | | separate | String | ' ' | ナンバープレート各項目の区切り文字 | | color | String | white | プレートの色。white, green, yellow, black が指定可能 | | disabled | Boolean | false | 全ての入力フィールドを無効化 | | required | Boolean | false | 全ての入力フィールドを必須入力に設定 |

Emits

| イベント名 | 説明 | | ------------------ | ---------------------------------------- | | update:modelValue | ナンバープレートの値が変更された際に発火 |

📝 ライセンス

このプロジェクトはMITライセンスのもとで提供されています。

👨‍💻 開発者情報

加藤@合同会社ZYG
https://www.zyg.jp