vue.jsの要素にカーソルを合わせるとdivが表示されます。しかし、私はそれを機能させるようには思えません。
vue.jsにホバーまたはマウスオーバーのイベントがないようです。これは本当ですか？
jquery hoverメソッドとvueメソッドを組み合わせることが可能でしょうか？
回答:
これは私があなたが求めていると思うものの実際の例です。
http://jsfiddle.net/1cekfnqw/3017/
<div id="demo">
<div v-show="active">Show</div>
<div @mouseover="mouseOver">Hover over me!</div>
</div>
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});v-on:mouseover="mouseOver"が、構文が変更されたvueのバージョンについては言及していませんでした
@mouseover:mouseover
上記のホバーのロジックが正しくないと感じます。マウスをホバーすると反転します。以下のコードを使用しました。申し分なく機能しているようです。
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>Vueインスタンス上
data : {
upHere : false
}それが役に立てば幸い
data: () => ({ upHere: false })
ここではメソッドは必要ありません。
HTML
<div v-if="active">
<h2>Hello World!</h2>
</div>
<div v-on:mouseover="active = !active">
<h1>Hover me!</h1>
</div>JS
new Vue({
el: 'body',
data: {
active: false
}
})子要素または兄弟要素を表示するには、CSSでのみ可能です。あなたは使用している場合は:hoverコンビネータ前に（+、~、>、space）。その後、スタイルはホバーされた要素には適用されません。
HTML
<body>
<div class="trigger">
Hover here.
</div>
<div class="hidden">
This message shows up.
</div>
</body>CSS
.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }とmouseoverやmouseleaveイベント、あなたはこのロジックを実装し、レンダリングの値に反応するトグル関数を定義することができます。
この例を確認してください：
var vm = new Vue({
el: '#app',
data: {btn: 'primary'}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id='app'>
<button
@mouseover="btn='warning'"
@mouseleave="btn='primary'"
:class='"btn btn-block btn-"+btn'>
{{ btn }}
</button>
</div>@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"
コンポーネントのテンプレート内で厳密にホバーをオンにしてクラスを切り替えることは可能ですが、明らかな理由により、これは実際的な解決策ではありません。一方、プロトタイピングについては、スクリプト内でデータプロパティやイベントハンドラーを定義する必要がないと便利です。
Vuetifyを使用してアイコンの色を試す方法の例を次に示します。
new Vue({
el: '#app'
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-toolbar color="black" dark>
<v-toolbar-items>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
</v-btn>
<v-btn icon>
<v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>新しいコンポジションAPIを使用して更新を行いますが。
<template>
<div @mouseenter="hovering = true" @mouseleave="hovering = false">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
export default {
setup() {
const hoverRef = ref(false)
return { hovering }
}
})
</script>useHover関数を作成すると、任意のコンポーネントで再利用できます。
export function useHover(target: Ref<HTMLElement | null>) {
const hovering = ref(false)
const enterHandler = () => (hovering.value = true)
const leaveHandler = () => (hovering.value = false)
onMounted(() => {
if (!target.value) return
target.value.addEventListener('mouseenter', enterHandler)
target.value.addEventListener('mouseleave', leaveHandler)
})
onUnmounted(() => {
if (!target.value) return
target.value.removeEventListener('mouseenter', enterHandler)
target.value.removeEventListener('mouseleave', leaveHandler)
})
return hovering
}Vueコンポーネント内で関数を呼び出す簡単な例を次に示します。
<template>
<div ref="hoverRef">
{{ hovering }}
</div>
</template>
<script lang="ts">
import { ref } from '@vue/compsosition-api'
import { useHover } from './useHover'
export default {
setup() {
const hoverRef = ref(null)
const hovering = useHover(hoverRef)
return { hovering, hoverRef }
}
})
</script>@vuehooks/coreを含む多くの便利な関数が付属しているようなライブラリを使用することもできuseHoverます。
以下は、MouseOverとMouseOutの非常に単純な例です。
<div id="app">
<div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor">
</div>
</div>
new Vue({
el:"#app",
data:{
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods:{
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
},
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
}
});このコードがどのように見えるか満足できない場合は、vue-mouseoverパッケージをご覧ください。
<div
@mouseover="isMouseover = true"
@mouseleave="isMouseover = false"
/>vue-mouseoverはv-mouseover、指定されたデータコンテキストプロパティを、カーソルがディレクティブがアタッチされているHTML要素に出入りするときに自動的に更新するディレクティブを提供します。
デフォルトでは、次の例のisMouseoverプロパティはtrue、カーソルがHTML要素の上にある場合で、falseそれ以外の場合は次のようになります。
<div v-mouseover="isMouseover" />また、デフォルトでisMouseoverは、は要素にアタッチされたときに最初に割り当てられるため、最初の/ イベントの前に未割り当てのままになることはありません。v-mouseoverdivmouseentermouseleave
ディレクティブを介してカスタム値を指定できますv-mouseover-value：
<div
v-mouseover="isMouseover"
v-mouseover-value="customMouseenterValue"/>または
<div
v-mouseover="isMouseover"
v-mouseover-value="{
mouseenter: customMouseenterValue,
mouseleave: customMouseleaveValue
}"
/>カスタムのデフォルト値は、セットアップ中にオプションオブジェクトを介してパッケージに渡すことができます。