2017-12-10

[Vue.js]メモ

呼び出したコンポーネントに click イベントで何かしたい場合はnative修飾子をつける

コンポーネント — Vue.js

<btn-component @click.native="onClick">ボタン</btn-component>

上のように、呼び出したコンポーネントに直接ネイティブのイベントで何かさせたい場合はnative修飾子をつける必要がある。

ページ遷移アニメーションを設定している際に、ページ遷移時に最上部までスクロールさせる方法

Vue.js は、ページ遷移時もスクロール位置を維持してしまう。ページ遷移アニメーションがない場合は、VueRouter に scrollBehaviour を設定することでページ最上部までスクロールすることが可能だが、この方法はページ遷移アニメーションがある場合は使用できない。

ページ遷移アニメーションがある場合は、フックを利用することで違和感なくページ最上部までスクロール出来る。

<transition name="slide" mode="out-in" @after-leave="scrollToTop">
  <router-view></router-view>
</transition>

例えばこのようなテンプレートの場合は、

export default {
  ~
  methods: {
    scrollToTop() {
      window.scrollTo(0, 0);
    },
  },
  ~
};

このように記述すれば実装可能。

before-enterタイミングでスクロールさせた場合、Firefox でカクつきが発生（原因不明）。after-leave タイミングなら正常に動作したため、こちらの方でメモを残す。