dialog部品 + tailwindcss + Zod, Vue 3 Component

概要

前回の、dialog 要素の続編メモになります

• Vue 実装になります。
• 検証はZod使う例です。

[ 公開: 2024/05/15]

---

構成

• Vue 3.4
• Zod
• tailwindcss: 3.4.1
• express

---

書いたコード

• https://github.com/kuc-arc-f/express_44vue/tree/main/sample/zod_test

https://github.com/kuc-arc-f/express_44vue/tree/main/sample/zod_test

---

dialog

• 完了 dialog: components/DialogBox.vue

https://github.com/kuc-arc-f/express_44vue/blob/main/sample/zod_test/src/components/DialogBox.vue

---

• ErrorDialogBox.vue : エラー用dialog

https://github.com/kuc-arc-f/express_44vue/blob/main/sample/zod_test/src/components/ErrorDialogBox.vue

---

• 読み込む画面.vue

• Zod.vue

• 保存時: zod検証＞OK時、成功dialog表示

• 検証NG: エラー dialog表示

https://github.com/kuc-arc-f/express_44vue/blob/main/sample/zod_test/src/client/Zod.vue

---

---

確認ダイアログ

• OK 押すと、次の関数実行
• cancel : dialog close
• components/ConfirmDialog.vue
• defineEmits: 親compoから、次の実行関数を渡す。

https://github.com/kuc-arc-f/express_44vue/blob/main/sample/zod_test/src/components/ConfirmDialog.vue

---

確認ダイアログ、呼び出し

• client/Confirm.vue

https://github.com/kuc-arc-f/express_44vue/blob/main/sample/zod_test/src/client/Confirm.vue