Vue.jsでファイルをdrag and dropする

本家はこちら

Vue.jsでファイルのdrag and drop をするときにdomイベントをどうやって渡すんだ？ってなったので、メモ。

公式のドキュメントに書いてあったので イベントハンドラ でそれを参照する。

$event を使うことででDOMイベントを渡すことができる。

サンプルコードは下記

<template>
  <div>
      <h1>drag and drop</h1>
            <label></label
      <div class="drop_area" @dragover.prevent @dragleave.prevent @drop.prevent @drop="drop($event)">

      </div>
  </div>
</template>

<script>
  export default {
    name: 'main-page',
    data () {
      return {}
    },
    methods: {
      drop (event) {
        // 処理を書く
      }
    }
  }
</script>

<style>
.drop_area {
  border: 5px solid gray;
  background: gray;
  width:  400px;
  height: 400px;
}
</style>

ブラウザはファイルをdrag and drop するとデフォルトの処理が発火してしまうので、下記を定義しておけば、それを抑止して、カスタムな処理ができるようになる。

@dragover.prevent @dragleave.prevent @drop.prevent

うん。簡単。