カテゴリー
コンピューター

Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った

Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った

はじめに

デイトピッカー flatpickr のラッパーコンポーネントライブラリのラッパー SFC を作る (Laravel 6 の Vue.js 3 の SPA 環境) – oki2a24 では flatpickr を Vue.js で使いやすくしたライブラリ のラッパー SFC を作りました。

関連

今回は、 flatpickr のみをラップした SFC を作りました。

コード

flatpickr を npm i flatpickr --save-dev で依存ライブラリに追加しました。

$ git diff laravel/package.json
diff --git a/laravel/package.json b/laravel/package.json
index 81998a8..5084b97 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -20,6 +20,7 @@
         "eslint": "^7.24.0",
         "eslint-config-prettier": "^8.2.0",
         "eslint-plugin-vue": "^7.9.0",
+        "flatpickr": "^4.6.9",
         "jquery": "^3.2",
         "laravel-mix": "^6.0.18",
         "lodash": "^4.17.19",
$

続いて、 flatpickr ラッパー SFC を呼び出す側のページをルーティングに追加しました。

$ git diff laravel/resources/js/router/index.js
diff --git a/laravel/resources/js/router/index.js b/laravel/resources/js/router/index.js
index 7f7c22e..a1b914d 100644
--- a/laravel/resources/js/router/index.js
+++ b/laravel/resources/js/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import ExampleComponent from "../components/ExampleComponent.vue";
 import SampleDropzone from "../views/SampleDropzone.vue";
+import SampleFlatpickr from "../views/SampleFlatpickr.vue";
 import SampleVueFlatpickr from "../views/SampleVueFlatpickr.vue";
 import SampleSelect2 from "../views/SampleSelect2.vue";
 import Vue3Dropzone from "../views/Vue3Dropzone.vue";
@@ -28,6 +29,11 @@ const routes = [
     name: "SampleVueFlatpickr",
     component: SampleVueFlatpickr,
   },
+  {
+    path: "/sample_flatpickr",
+    name: "SampleFlatpickr",
+    component: SampleFlatpickr,
+  },
   {
     path: "/sample_select2",
     name: "SampleSelect2",
$

次は、 flatpickr ラッパー SFC を呼び出す側のページそのもの、 laravel/resources/js/views/SampleFlatpickr.vue 、です。ここではラッパー SFC を 2 つ呼び出すようにしてみました。

<template>
  <div class="container">
    <h1>SampleFlatpickr</h1>
    <base-flatpickr v-model="date1" />
    <base-flatpickr v-model="date2" />
  </div>
</template>

<script>
import BaseFlatpickr from "../components/BaseFlatpickr.vue";
import { ref } from "vue";

export default {
  name: "SampleFlatpickr",
  components: { BaseFlatpickr },
  setup() {
    return {
      date1: ref(""),
      date2: ref(""),
    };
  },
};
</script>

最後に、 flatpickr ラッパー SFC である、 laravel/resources/js/components/BaseFlatpickr.vue 、です。

<template>
  <input ref="root" type="text" @input="updateModelValue" />
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import flatpickr from "flatpickr";
import { Japanese } from "flatpickr/dist/l10n/ja.js";

export default {
  name: "BaseFlatpickr",
  props: {
    config: {
      default: () => {},
      required: false,
      type: Object,
    },
    modelValue: {
      default: null,
      required: true,
      type: String,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const root = ref(null);

    const updateModelValue = (event) => {
      emit("update:modelValue", event.target.value);
    };

    onMounted(() => {
      Japanese.firstDayOfWeek = 1;
      const config = {
        locale: Japanese,
        ...props.config,
      };
      flatpickr(root.value, config);
    });

    onUnmounted(() => {
      flatpickr.destroy();
    });

    return { root, updateModelValue };
  },
};
</script>

おわりに

前回 は flatpickr を Vue.js で使いやすくしたライブラリを使いました。今回は、素の flatpickr を使いましたけれども自分がやりたいことをやる範囲内では思ったほどコードは長くならずに書くことができました。

これでよさそうだ、と思います。

以上です。

コメントを残す