And*_*sen 83 javascript vue.js
我想在vue.js中悬停元素时显示div.但我似乎可以让我工作.
我看起来没有事件悬停或鼠标悬停我vue.js它真的是真的吗？
是否可以组合jquery hover和vue方法？
sha*_*e93 154
我觉得悬停上面的逻辑是不正确的.它只是在鼠标悬停时反转.我用过以下代码.它看起来工作得很好.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
在vue实例上
data : {
upHere : false
}
希望有所帮助
Jar*_*rod 75
这是我认为你要求的一个实例.
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;
}
}
});
NIC*_*ICO 74
这里不需要一种方法.
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
}
})
小智 22
要显示子元素或兄弟元素,只能使用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; }
fit*_*rec 12
使用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>jsb*_*oks 10
尽管我会使用新的合成 API 进行更新。
<template>
<div @mouseenter="hovering = true" @mouseleave="hovering = false">
{{ hovering }}
</div>
</template>
<script>
import { ref } from '@vue/composition-api'
export default {
setup() {
const hovering = 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/composition-api'
import { useHover } from './useHover'
export default {
setup() {
const hoverRef = ref(null)
const hovering = useHover(hoverRef)
return { hovering, hoverRef }
}
})
</script>
您还可以使用一个库，例如@vuehooks/core它附带许多有用的功能，包括useHover.
参考：Vuejs 组合 API
与mouseover只有元素时鼠标离开悬停的元素保持可见,所以我加了这一点:
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
可以严格在组件的模板内切换悬停类，但是，出于明显的原因，这不是实际的解决方案。另一方面，对于原型制作，我发现不必在脚本中定义数据属性或事件处理程序很有用。
这是如何使用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>我认为你想要实现的是结合
@mouseover, @mouseout, @mouseenter and @mouseleave
所以两个最好的组合是
"@mouseover and @mouseout"
或者
"@mouseenter and @mouseleave"
而且我认为，最好使用第二对，以便您可以实现悬停效果并在其上调用功能。
<div @mouseenter="activeHover = true" @mouseleave="activeHover = false" >
<p v-if="activeHover"> This will be showed on hover </p>
<p v-if ="!activeHover"> This will be showed in simple cases </p>
</div>
在 vue 实例上
data : {
activeHover : false
}
注意：第一对也会影响/移动子元素，但第二对只会影响你想使用它的地方，而不是子元素。否则，使用1st pair会遇到一些故障/波动。因此，最好使用第二对以避免任何波动。
我希望，它也能帮助其他人:)
| 归档时间： |
|
| 查看次数： |
173185 次 |
| 最近记录： |