フェードインとか。
おまけもあるよ💖
◆おことわり
古いブラウザは知らない。帰れ。
…
…いや、帰れよ。何だよその目は。
…かーえーれっ！かーえーれっ！
ｳｪﾋﾋﾋｗｗｗ
あ！泣いてやんの！だっせ！だっせ！
◆Intersection Observer
まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。
タグ: vue Page 1 of 2
◆結論
created: () => (document.documentElement.setAttribute('lang', 'ja')),
☝をぶち込め。
new Vue({
vuetify,
router,
store,
render: (h) => h(App),
created: () => (document.documentElement.setAttribute('lang', 'ja')),
}).$mount('#app');
追記：どっか（publicフォルダとか）に落ちてるindex.htmlで2行目に書いてあるであろうlangを普通に書き換えてもいいなと思った。
◆経緯
◆結論
Vue.set使いなはれ。
◆経緯
TypeScriptで連想配列をIndex Signaturesで作るじゃん？んで、その中身書き換えんじゃん？
変更が反映されないんすよ。
private hoge = {} as {[key: number]: string};
private created(){
this.hoge[0] = 'ちんちん';
}
private piyo(){
this.hoge[0] = 'もがもが';
}
piyoを呼んでも内容が書き変わらない。ぴぎゃあ！
イヤー詰まった。
◆結論
当然ながらTypeScriptだよ。なんでJavaScriptなんて使ってるわけ？いい大人がさぁ。聡ずかしくないのかよ。
<v-switch :input-value="hoge" @click="piyo" @change="fuga" />
private hoge = false;
private piyo(e: MouseEvent) {
if (!window.confirm('お前はそれでいいのか？')) e.preventDefault();
}
private fuga(){
// 適当な処理
}
答えが分かれば簡単だった。
◆理解のキモ
いや書きてぇわ俺も。フロントエンドエンジニア達は不安よな。とは思えどもタイミングがちょっと違う気がする。
◆理由
導入簡単すよ。公開も簡単すよ。APIサーバー立ち上げんのも簡単す。でもね？Vue.jsの3.0が来るんすよね。
その時にお前ら「あのブタ畜生、3.0来るってわかってんのに2.6の導入方法教えやがったな。よし。決めた。殺そう。」
こうくるでしょう。俺はそんな理由で死にたくない。
だから教えようにもなかなか。
IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。
で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。
だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。
参考：Window: unhandledrejection イベント
で、IE11で動かなかった。ビルゲイツ殺す。
◆ひとりごと
Swiperじゃなくてtiny-slider使った方が良いような気がする。
◆要件
- カルーセル
- 両端に前後のスライドちら見せ
- 自動送り
- 無限ループ
- 親要素から要素数不明のオブジェクト列を受け取り、その内容からスライドを生成。
- 親要素はaxiosでそのオブジェクト列を取得する。レンダリングとは非同期な通信である。
- TypeScriptで、単一ファイルコンポーネントで、SCSS。
- vue-property-decorator使ってるよ！便利だよ！君も使いなよ！
◆修正しました
◆2019/6/23
修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。２パターン紹介しているから、好きな方を使え。
Vue 3.0が来たらフラグメント使え。
◆したいこと
- APIで画像を表示する。（SVGじゃないやつ）
- APIで画像が取得できなかった時は、指定の画像を表示する。（SVGでもなんでも）
- APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。
◆おことわり
以下の成分を含みます。
これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。
聖夜なので記事を捧げます。この狂った世界（Webフロントエンド）へ。
この記事がいつか、世界の片隅に打ち捨てられた震えるチワワフロントエンドエンジニアとチワワを救うと信じています。