まとめなど
- iframe タグの src 属性に指定した URL に対してデータを送信し、その URL のページから送信されるデータを受信する。送受信、ピンポンするようなイメージ。
- 呼び出されるオリジン側の認証状態の操作を行う (ことで呼び出されるオリジンのCookieを操作する) のに便利
- 前回の 【TypeScript】iframe からの postMessage を受け取る汎用関数を作った – oki2a24 の仲間。
タグ: Vue.js 3
まとめなど
<iframe>から送られてくる postMessage を受信したいときに使用する。- 認証状態をチェックするときに使うと便利。
- セキュリティについて、汎用関数内で postMessage の送信元をチェックするようにしているが、これ以外にも例えば
<iframe>で指定する URL 側でも措置を別途考慮する必要がある点に注意。 - 汎用関数の引数に指定する
<iframe>の URLは、静的な HTML をレスポンスする場合は想定通りの動きをした。しかし、 Vue Router で定義したページを指定した場合には想定通りの動きをせず、使い物にならなかった。
やりたいこと
- Vue.js 3
- Swiper の SFC への入力
- 画像 URL の配列
- Swiper の SFC からの出力
- 特になし。
- スライドショー、フォトギャラリーがウェブブラウザに描画される
- サムネイルあり
まとめ
- feat: Bootstrap 5 を Laravel 8 の Vue.js 3 SPA に導入する · oki2a24/laravel8-boilerplate@dd592f4 or feat: Bootstrap 5 を Laravel 8 の Vue.js 3 SPA に導入する by oki2a24 · Pull Request #4 · oki2a24/laravel8-boilerplate にやったことが全て残っている。
- npm install したもの
@popperjs/corebootstrapresolve-url-loadersasssass-loader
laravel/webpack.mix.jsに npm build 時の Bootstrap 5 の SASS の設定を追加laravel/resources/js/bootstrap.jsに Bootstrap 5 の読み込を追加laravel/resources/sass/app.scssファイルを追加し、 Bootstrap 5 の SASS を読み込む。laravel/resources/sass/_variables.scssファイルを追加した。 Bootstrap 5 をカスタマイズする時の内容を書くためのファイル
どの状態から始めたか?
Laravel 8 をインストールした直後に Vue.js 3 を SPA として最低限使えるようにしました。
まとめ
- Dropzone の
addedfileイベント時に emit するが、この時に送出する変数としてイベント発生時に受け取れる file 以外に、 Dropzone オブジェクトも加える。
話としては、 Vue.js 3 で Dropzone をラップした SFC その3 。ファイルアップロード前に確認操作を挟む – oki2a24 の続きとなります。
Vue.js 3 で Dropzone をラップした SFC その2 。 HTML 要素 の id ではなく要素そのものを指定して Dropzone と紐付ける等 – oki2a24 の続きとなります。
Dropzone はファイルをドロップや選択すると予め指定した URL に対して、自動的に即座にアップロードを開始します。 とても便利ですけれども、例えば、ヘッダに情報を追加した Axios を他のところでも使っているので Dropzone でも使いたい、ファイルアップロード前に確認操作を挟みたい、という時はどうしたら良いでしょうか？
本投稿では、ファイルアップロード前に確認操作を挟みたい、の例をとりあげます。
はじめに
本投稿は、 【Vue.js】ページネーションコンポーネント（ページ遷移ごとにデータを取得するタイプ） | Wood-Roots:blog にて Vue.js 2 で書かれたページネーションのシングルファイルコンポーネント (SFC) を Vue.js 3 で書き直したものです。
元となった 【Vue.js】ページネーションコンポーネント（ページ遷移ごとにデータを取得するタイプ） | Wood-Roots:blog に感謝申し上げます!
また、本投稿は、本ブログの Vue.js 3 で flatpickr をラップした SFCその2 。ページ移動時に発生していたエラーを解消する – oki2a24 の続きとなります。
ページ移動時に発生していたエラー内容
Vue Router のリンクをクリックすると、次のエラーが発生していました。
Uncaught (in promise) TypeError: flatpickr__WEBPACK_IMPORTED_MODULE_1__.default.destroy is not a function
at app.js:17969
at callWithErrorHandling (app.js:6469)
at callWithAsyncErrorHandling (app.js:6478)
at Array.hook.__weh.hook.__weh (app.js:9214)
at flushPostFlushCbs (app.js:6669)
at flushJobs (app.js:6705)
カスタマイズした内容
<template>の<div>要素のidではなく、<div>要素そのものを Dropzone を紐づくようにした。- Dropzone の options を渡せるようにした。