Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。
vue-backtotop
名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。
vue-scrollto
ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
offset: -80 //headerの高さの分
})
offset以外にもスクロールの速度なども設定できます。
他画面からの移動
idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
mounted () {
const hash = this.$route.hash
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash)
}
}
しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。
mounted() {
setTimeout(this.scroll, 300);
},
methods: {
scroll() {
const hash = this.$route.hash;
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash);
}
}
}
カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。
vue-material-design-icons
マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。
title、descriptionやogなど、headに記述するメタ情報の設定に使いました。
FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。
GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。
日付の書式を整えるときに使いました。