例えばボタンの役割を担うアイコンなど。
マウスオーバー(マウスカーソルが乗る)のタイミングで、色が変わってアクティブな感じに。
マウスアウト(マウスカーソルが外れる」)のタイミングで、元の色に戻るようにする。
↑このカメラのアイコンにマウスが重なった時だけ、アイコンを半透明にしたいときとか。
<template> <div class="icon"> <label style="display:initial;"> <font-awesome-icon :class="activeStatus" @mouseover="beActive" @mouseleave="beInActive" class="child" :icon="['fa', 'camera']" /> <input type="file" class="form-control-file " ref="file" @change="fileSelected" accept=".jpg,.jpeg,.png,.gif" style="display:none"> </label> </div> </template> <script> export default { data() { return { activeStatus: 'inactive' } }, methods: { beActive() { console.log('マウスオーバー') this.activeStatus = 'active' }, beInActive() { console.log('マウス外れた') this.activeStatus = 'inactive' }, } </script> <style scoped> .icon{ color:white; } .inactive { /*何も書かなくていいかも*/ } .active { opacity: 0.8; } </style>
5行目から7行目にかけての:class="activeStatus" @mouseover="beActive" @mouseleave="beInActive" が今回のポイント。
マウスが乗ったら、beActiveというメソッドが発動
ハウスが外れたら、beInActiveというメソッドが発動
それにより、クラスが切り替わって見た目が変わる。
そんなかんじ。
booleanで切り替えるとかもっとスマートな方法があるかもしれないけど、まあいったんこれで動いた。
参考にしたサイト
【Vue.js】マウスオーバーとマウスリーブ|Into the Program