VUEを使用してフラッシュコードを1 .js

この短い記事でVueを使用してドラッグアンドドロップコンポーネントを作成する方法を示します.JSとTarwindCSS.

プレビュー

リンク242479152
Flash Code

UIから始めましょう

いくつかのテールウインドクラスで一つのdivを置きます.
< div >
< br/>
これらのCSSクラスは以下のようになります.
<ウル>

BG - GRAY - 200、丸みを帯びたLG、境界2、境界線ダッシュ、および境界線- 500 :これらはTruwindCSSクラスです.彼らはかなり自明ですが、より多くのinfosを望むならば、あなたはTailwindの をチェックアウトすることができます.

DropZone :幅を500 pxに設定し、高さを500 pxに設定します.

< ull >
そして、それは我々が得るものです
docs

テキストを追加しましょう.私たちは、単に最初のものの中に別のdivを加えることによってそれをすることができますbr/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/3f421a1d381b1ddaa0a0ee87ba31950e.js//>
< div >
< br/>
すべてのCSSクラスはDropZone子要素を除いてTailWindCSSからです.このクラスは、ユーザがdropzone内のコンテンツと相互作用するのを防ぎます.
ポインタイベント:なし;
<高橋>

何かをする時間です。

ファイルをドラッグする際に境界色を変更します
まず、ファイルがドラッグされたときに境界色を変更することでDropZoneをインタラクティブにしましょう.DropEnterイベントとDragLeaveイベントを使用して、ファイルがドロップ領域をホッピングしているかどうかを検出します.FileOverdropareaという変数を使用して境界色を制御しますbr/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/4b829d22596b0f57945fa7b562e2e221.js//>
< div >
< br/>
どのように動作するか説明しましょう
このコードでは、ファイルがドロップダウン領域に入っているときにFileOverdropareaをtrueまたはfalseに設定しますbr/>
このイベントが発生したときにデフォルトのアクションをキャンセルしますbr/>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/eaa54e2b5bd76b3061a0cef0dc9bc613.js//>
< div >
< tt > Vueのおかげでクラス属性をバインドすることで、ある条件が満たされた場合にのみクラスを追加できます.この場合、FileOverdropareaがfalseの場合、境界色を暗灰色に設定し、TRUEであれば赤に設定しますbr/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/7d67fa22d263d9fdfa326ac3db8cf2a5.js//>
< div >
ファイルアップロードの処理
ホバーアニメーションが動作するようになったので、ファイルアップロード部を処理しましょうbr/>
これは最も簡単な部分です.私たちがしなければならないのは、ドロップと呼ばれる別のイベントを聞いて、イベントが解雇されたときにメソッドを呼び出すことですbr/>
そのためには、この行をDropZone div :< p >に追加します.
< div >
これはdropfileメソッドのコードです
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/0c8f1966290e6ff997d7c5d35f1b70c7.js//>
< div >

完全なコンポーネントコード：

< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/Karm0s/5797ffd2c67e9a2bde9b184a6dfe908b.js//>
< div >

このシリーズについての速い語：

フラッシュコードは、VEJEsを使用して様々なコンポーネントを構築する方法を示す一連の投稿です.これは最初のポストでした、そして、多くは次の週に出てきますbr/>
私は、この最初のポスト(これは実は私の最初のブログ柱です)についてのあなたの考えを聞きたいですbr/>
読んでくれてありがとう.p >