鼠标悬停或悬停 vue.js
我想在 vue.js 中的元素上悬停时显示一个 div。但我似乎无法让它工作。
vue.js 中似乎没有 hover 或 mouseover 的事件。这是真的吗？
是否可以结合 jquery hover 和 vue 方法？
我觉得上面的悬停逻辑是不正确的。它只是在鼠标悬停时反转。我用过下面的代码。它似乎工作得很好。
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
在 vue 实例上
data : {
upHere : false
}
希望有帮助
这是我认为您所要求的工作示例。
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
这里不需要方法。
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。如果在组合符（+、~、>、space）之前使用 :hover。然后该样式不适用于悬停元素。
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'} });
@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"
虽然我会使用新的组合 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。
我认为你想要实现的是结合
@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
}
注意：第一对也会影响/移动子元素，但第二对只会影响您想要使用它的地方，而不是子元素。否则，使用第一对您会遇到一些故障/波动。因此，最好使用第二对以避免任何波动。
我希望，它也会对其他人有所帮助:)
可以在组件模板中严格切换悬停类，但是，由于显而易见的原因，这不是一个实用的解决方案。另一方面，对于原型设计，我发现不必在脚本中定义数据属性或事件处理程序很有用。
这是一个如何使用 Vuetify 试验图标颜色的示例。
新 Vue({ el: '#app' })
使用 mouseover 只有当鼠标离开悬停元素时该元素保持可见，所以我添加了这个：
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
我想出了同样的问题，我解决了！
有一个正确的工作 JSFiddle：http://jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>
如果您对这段代码的外观不满意，请查看 vue-mouseover 包：
<div
@mouseover="isMouseover = true"
@mouseleave="isMouseover = false"
/>
vue-mouseover 提供了一个 v-mouseover 指令，当光标进入或离开该指令所附加到的 HTML 元素时，该指令会自动更新指定的数据上下文属性。
在下一个示例中，默认情况下，当光标位于 HTML 元素上时，isMouseover 属性将为 true，否则为 false：
<div v-mouseover="isMouseover" />
此外，默认情况下，当 v-mouseover 附加到 div 元素时，isMouseover 将被初始分配，因此在第一个 mouseenter/mouseleave 事件之前它不会保持未分配状态。
您可以通过 v-mouseover-value 指令指定自定义值：
<div
v-mouseover="isMouseover"
v-mouseover-value="customMouseenterValue"/>
或者
<div
v-mouseover="isMouseover"
v-mouseover-value="{
mouseenter: customMouseenterValue,
mouseleave: customMouseleaveValue
}"
/>
自定义默认值可以在设置期间通过 options object 传递给包。
这是 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";
}
}
});
这对我有用 nuxt
<template>
<span
v-if="item"
class="primary-navigation-list-dropdown"
@mouseover="isTouchscreenDevice ? null : openDropdownMenu()"
@mouseleave="isTouchscreenDevice ? null : closeDropdownMenu()"
>
<nuxt-link
to="#"
@click.prevent.native="openDropdownMenu"
v-click-outside="closeDropdownMenu"
:title="item.title"
:class="[
item.cssClasses,
{ show: isDropdownMenuVisible }
]"
:id="`navbarDropdownMenuLink-${item.id}`"
:aria-expanded="[isDropdownMenuVisible ? true : false]"
class="
primary-navigation-list-dropdown__toggle
nav-link
dropdown-toggle"
aria-current="page"
role="button"
data-toggle="dropdown"
>
{{ item.label }}
</nuxt-link>
<ul
:class="{ show: isDropdownMenuVisible }"
:aria-labelledby="`navbarDropdownMenuLink-${item.id}`"
class="
primary-navigation-list-dropdown__menu
dropdown-menu-list
dropdown-menu"
>
<li
v-for="item in item.children" :key="item.id"
class="dropdown-menu-list__item"
>
<NavLink
:attributes="item"
class="dropdown-menu-list__link dropdown-item"
/>
</li>
</ul>
</span>
</template>
<script>
import NavLink from '@/components/Navigation/NavLink';
export default {
name: "DropdownMenu",
props: {
item: {
type: Object,
required: true,
},
},
data() {
return {
isDropdownMenuVisible: false,
isTouchscreenDevice: false
};
},
mounted() {
this.detectTouchscreenDevice();
},
methods: {
openDropdownMenu() {
if (this.isTouchscreenDevice) {
this.isDropdownMenuVisible = !this.isDropdownMenuVisible;
} else {
this.isDropdownMenuVisible = true;
}
},
closeDropdownMenu() {
if (this.isTouchscreenDevice) {
this.isDropdownMenuVisible = false;
} else {
this.isDropdownMenuVisible = false;
}
},
detectTouchscreenDevice() {
if (window.PointerEvent && ('maxTouchPoints' in navigator)) {
if (navigator.maxTouchPoints > 0) {
this.isTouchscreenDevice = true;
}
} else {
if (window.matchMedia && window.matchMedia("(any-pointer:coarse)").matches) {
this.isTouchscreenDevice = true;
} else if (window.TouchEvent || ('ontouchstart' in window)) {
this.isTouchscreenDevice = true;
}
}
return this.isTouchscreenDevice;
}
},
components: {
NavLink
}
};
</script>
<style scoped lang="scss">
.primary-navigation-list-dropdown {
&__toggle {
color: $white;
&:hover {
color: $blue;
}
}
&__menu {
margin-top: 0;
}
&__dropdown {
}
}
.dropdown-menu-list {
&__item {
}
&__link {
&.active,
&.nuxt-link-exact-active {
border-bottom: 1px solid $blue;
}
}
}
</style>
关注公众号
不定期副业成功案例分享
data: () => ({ upHere: false })