Vueなどメモ
現在、vue,react,vite,javascript,typescript,node.jsがごっちゃになってるのでまとまったら分離する予定
画像ファイルをassetから読み込む(Vite)
importで画像を読み込める。imgタグのsrcに直接渡せる。
code:js
import reactLogo from "./assets/react.svg";
...
<img src={reactLogo} alt="React logo" />
jsonファイルをassetから読み込む(Vite)
importでファイルをJSONとして取り込める。ファイル名のあとに?rawをつけると文字列として取り込む。
code:js
import dbJson from './assets/tagdb.json?raw'
...
const tagsJson = JSON.parse(dbJson)
フォームの内容を自動的に全選択する場合(Vue)
textareaにカーソルが乗ったら自動的に全選択したいとする。
code:html
<textarea @focus="this.select()"></textarea>
エラーが出る。this' は型として注釈を持たないため、暗黙的に型 'any' になります。
なのでこうする
code:html
<textarea onfocus="this.select()"></textarea>
ネイティブJavascriptを書いただけ。Vueの中で書いているとネイティブJSを忘れがち。
Javascriptからvideoタグの操作(Javascript)
とりあえず「5秒進む」と「5秒戻る」のみ
code:js
<video id="video-player" src="someVideo.mp4" />
<button onClick="backward">◀◀</button>
<button onClick="forward">▶▶</button>
...
function forward() {
const videoNode = document.getElementById("video-player") as HTMLVideoElement;
if (videoNode.currentTime + 5 > videoNode.duration) {
videoNode.currentTime = videoNode.duration;
} else {
videoNode.currentTime = videoNode.currentTime + 5;
}
}
function backward() {
const videoNode = document.getElementById("video-player") as HTMLVideoElement;
if (videoNode.currentTime - 5 < 0) {
videoNode.currentTime = 0;
} else {
videoNode.currentTime = videoNode.currentTime - 5;
}
}