HYUDORO

勉強したことや日記など

vue.js

Vue.jsでTextareaフォーカス時にReturnキーを押したらSubmit処理する

KeyboardEventを型として、keyとcodeの両方で"Enter"を検出する。 下記の例では、0文字のときは送信しなかったり、改行したいときの対策でShiftを押している時は送信しないようにしている。 <textarea v-model="text" @keypress="onInputKeyPress"></textarea> onInputKeyPress(_e) { if (_e.key == "Enter" || _e.code == "En…

mobile-device-detect を導入した

Vueプロジェクトでデバイス検出するためにmobile-device-detectを使ってみた。 普段のサービス開発では、nuxt-device-detectを使っていて、これはそれに似たもの。 www.npmjs.com 導入 $ yarn add mobile-device-detect Vueファイルの中でいちいち呼び出すこ…

Vue Material Design Icon Components を導入した

普通のVueプロジェクトでマテリアルアイコンを使いたかったので、このライブラリを導入してみた。 クラスを指定するのではなく、コンポーネントを読み込む形式。 www.npmjs.com チートシートはこちらを参照。 cdn.materialdesignicons.com

Nuxt環境でFont Awesomeを使った

こちらを参考にやってみた。 qiita.com 使いたいタイプ(Solid, Regular, Brand)を読み込んで使う形式。有料版とはまた別なので注意。 yarnの場合のインストールコマンドは下記の通り。 # 必須 $ yarn add @fortawesome/vue-fontawesome @fortawesome/fonta…