vue.js v2(Nuxt)で下にフリックして閉じられるモーダルコンポーネントを作ってみた

下にフリックして閉じられるモーダルは、最近のアプリでは定番になりつつあるがwebではまだあまり見たことがなく、あったらいいのになぁ、と漠然と思ってた。
そんな折 「【新版】UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェイスデザインとUX 」という本を読み、こういったUIが今後のトレンドに対する新たなアプローチですよ、というご意見に完全に触発され作ってみたくなった。

ので、作ってみた。

SwipeableDrawer

■ デモ
https://dsflon.github.io/SwipeableDrawer/
（スマホで見てください）

■ ソース
https://github.com/dsflon/SwipeableDrawer

参考にした本ではハーフモーダルと表現されていますが、Material-UIを参考に SwipeableDrawer というコンポーネント名にしました。

使う

■ 本体はここ
https://github.com/dsflon/SwipeableDrawer/tree/master/components/SwipeableDrawer

nuxtで typescript vue-property-decorator を入れている場合、下記のような感じで利用します。

index.vue

<template>
  <div>
    <button @click="opened = true">
      開く
    </button>

    <SwipeableDrawer
      :open="opened"
      @close="opened = false"
    >
      <!-- ここに内容を入れます -->
    </SwipeableDrawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { SwipeableDrawer } from '~/components/SwipeableDrawer';

@Component({
  components: {
    SwipeableDrawer,
  },
})
export default class Index extends Vue {
  opened = false;
}
</script>

詳細を...そのうち書きます...

• easingJSを自前でこしらえた件
• スワイプとフリックの両方で閉じられるようにした件
• 横方向スクロールと干渉しあわないようにスワイプの角度を考慮した件