😁
フロントエンド Tips集
フロントエンドのTipsを書き連ねる記事
毎回調べるのめんどくさいので業務で使用したフロントエンドのTipsをどんどん追加していきます。
書きなぐりなので見づらいところがあるかも・・・
フッター下固定
mainの要素が少ない時にフッターを下固定にする。
<html>
<body>
<div class="main">
<header></header>
<div class="main__inner"></div>
<footer></footer>
</div>
</body>
</html>
html,body {
min-height: 100vh;
}
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.footer {
margin-top: auto;
}
クリックやタップしたときに青くなる現象
-webkit-tap-highlight-color:rgba(0, 0, 0, 0)
ツールバーやアドレスバーで要素が隠れてしまう
bodyにinnerHeightを設定する。
// 読み込み時にbodyにウィンドウの高さを指定
document.body.onload = ()=>{
document.body.style.minHeight = window.innerHeight + 'px';
}
// 横向きにした時に再度高さを指定
let timer;
window.addEventListener("resize", () => {
clearTimeout(timer);
timer = setTimeout(() => {
document.body.style.minHeight = window.innerHeight + 'px';
}, 500);
});
ライブ配信のコメントビュワー
YouTubeのようなライブ配信のコメントビュワーをCSSのみで実装
※スクロールができないので注意
※liをDOMで追加していく
<html>
<body>
<div class="main">
<header></header>
<div class="comment-viewer">
<ul class="comment-viewer__list">
<li class="comment-viewer__item"></li>
<li class="comment-viewer__item"></li>
</ul>
</div>
<footer></footer>
</div>
</body>
</html>
.comment-viewer {
position: absolute;
top: 40%;
right: 40px;
bottom: 24px;
left: 16px;
overflow: hidden;
}
.comment-viewer__list {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
}
.comment-viewer__item {
width: 100%;
margin-bottom: 4px;
}
ベーシック認証がかかったURLにリダイレクトする方法
<a href="https://ユーザー名:パスワード@hogehoge.jp">
連想配列 キーでグループ化
var foods = [
{'name':'Apple', 'category':'fruits'},
{'name':'Strawberry', 'category':'fruits'},
{'name':'Tomato', 'category':'vegetables'},
{'name':'Carot', 'category':'vegetables'},
{'name':'water', 'category':'drink'},
{'name':'beer', 'category':'drink'},
];
var expected = {};
foods.map(function (i,j) {
var cat=i["category"];
if(typeof expected[cat]=="undefined") expected[cat]=[];
expected[cat].push(i);
});
console.log(expected);
【Vue】エラー対処法：[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"
Vueで以下のようなエラーが発生したときのの対処法。
[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"
受け取るデータをnullチェックする。
{{ (item || {}).xxx }}
vueでソートを実装
■逆順にソート
computed: {
// 配列の要素順番を逆順にする
reverseItems() {
return this.items.slice().reverse()
},
}
■指定したキーでソート
computed: {
// amountで並べ替え
sortedItemsByAmount(){
return this.items.slice().sort((a, b) => {
return (a.amount < b.amount) ? -1 : (a.amount > b.amount) ? 1 : 0
})
}
}
vueでv-forで指定回数分だけ回す
配列の1～3番目まで
v-for="（item, index) in items" v-if="index > 0 && index < 4"
配列の0～4番目まで
v-for="（item, index) in items" v-if="index >= 0 && index < 4"
Discussion