vue3-prefecture-selector v1.0.6

vue3-prefecture-selector

都道府県選択を簡単に行う為のモーダルコンポーネントです。

DEMO

Codesandbox

Features

都道府県選択を行う為のモーダルコンポーネントです。

地図上で、都道府県やテキストをクリックすることでイベントが発行されます。

Requirement

• vue 3

Installation

$ npm install vue3-prefecture-selector

Usage

<template>
  <PrefectureSelector
    :visibility="visibility"
    @prefectureClick="onPrefectureClick"
    @close="closeModal"
  />
  <input type="text" v-model="inputValue" />
  <button @click="openModal">都道府県を選択する</button>
</template>

<script>
import PrefectureSelector from "prefecture-selector";

export default {
  name: "App",
  data() {
    return {
      visibility: false,
      inputValue: "未選択",
    };
  },
  components: {
    PrefectureSelector,
  },
  methods: {
    openModal() {
      this.visibility = true;
    },
    closeModal() {
      this.visibility = false;
    },
    onPrefectureClick(e) {
      this.inputValue = e.prefectureName;
      this.visibility = false;
    },
  },
};
</script>

Spec

Props

Event

License

"vue3-prefecture-selector" is under MIT license.