とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7
最後は細かいテクニック的なところについて
ローディング
API から投稿データ取得するまでローディング、取得後に解除する
DOM更新後にローディング解除したいので $nextTick を使う
mounted: function () {
this.$nextTick(function () {
})
}
loading.vue
<template>
<transition name="fade">
<template v-if="!loading">
<p>loading</p>
</template>
<template v-else>
<child-component></child-component>
</template>
</transition>
</template>
<script>
import ChildComponent from './childComponent';
export default {
components: {
ChildComponent
},
data() {
return {
loading: true
}
},
mounted: function () {
this.$nextTick(function () {
this.loading = false;
})
}
};
</script>
配列からオブジェクトへ変換
array
[
[
"https://siteUrl/image01.jpg",
1718,
1150,
false
],
[
"https://siteUrl/image02.jpg",
896,
1248,
false
],
[
"https://siteUrl/image03.jpg",
1722,
1148,
false
]
]
を
formattedArray
[
{
"src": "https://siteUrl/image01.jpg",
"w": 1718,
"h": 1150
},
{
"src": "https://siteUrl/image02.jpg",
"w": 896,
"h": 1248
},
{
"src": "https://siteUrl/image03.jpg",
"w": 1722,
"h": 1148
}
]
にしたい
array.forEach(function(v){
const temp = {
src: v[0],
w: v[1],
h: v[2]
};
formattedArray.push(temp)
});
とすると formattedArray は欲しいフォーマットになる
ループでランダムな数値をつける
最初にデータの整形とランダム数値の付与
imagesArray
[
"https://siteUrl/image01.jpg",
"https://siteUrl/image02.jpg",
"https://siteUrl/image03.jpg"
]
を
imagesObject
[
{
"src": "https://siteUrl/image01.jpg",
"delay": "0.20"
},
{
"src": "https://siteUrl/image02.jpg",
"delay": "0.47"
},
{
"src": "https://siteUrl/image03.jpg",
"delay": "0.72"
}
]
にしたい。
ここも forEach だけど、他のやり方がありそう
const imagesObject = [];
imagesArray.forEach((value) => {
const delayRandomNum = (Math.random() * 1 + 0).toFixed(2);
imagesObject.push({
src: value,
delay: delayRandomNum
})
});
this.imagesObject = imagesObject
オブジェクトを作成処理ができたら <template> 箇所で
<template>
<div
v-for="(image, index) in imagesObject"
:key="index"
>
<img
:src="image.src"
:style="{ transitionDelay: image.delay + 's' }"
>
</div>
</template>
とする。HTMLは
<div><img src="https://siteUrl/image01.jpg" style="transition-delay: 0.20s;"></div>
<div><img src="https://siteUrl/image02.jpg" style="transition-delay: 0.47s;"></div>
<div><img src="https://siteUrl/image03.jpg" style="transition-delay: 0.72s;"></div>
となるのであとはcssで調整
だいたい画像文字なのですが、このくらい生かしてるサイトもなかなか見なくなってきた
くすんだ緑やベージュがWebっぽくない色使いで新鮮
マウスオーバーのインタラクション
文字大きくてもださくない Nuxt
グラフィックなデザインでWebサイト
これもイラスト的にグラフィック方向だけど実装もしっかりしてる感じ
町おこし？系のWebでごりごり技術使ってデザインもいい
そんな新しくないかもですが、Works一覧の色とかおもしろい
コンセプトがそうなんで紙っぽいデザインなのですがモチーフの入れ方とかうまい感じ
流行りの感じですが海外の人に受けそうな
カッチリしたイメージの企業だけど写真・スペース大きめで今っぽいコーポレートサイト
今まで見たことないWebサイト、ということでこれが今年ベストな気がします。毎年楽しみ。
