vue.js의 요소 위로 마우스를 가져갈 때 div를 표시하고 싶습니다. 하지만 작동하지 않는 것 같습니다.
vue.js에 hover 또는 mouseover에 대한 이벤트가없는 것 같습니다. 정말 사실인가요?
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
}
})v-on:mouseover또는 바로 가기 @mouseover워드 프로세서 당은 vuejs.org/guide/syntax.html#v-on-Shorthand
자식 또는 형제 요소를 표시하려면 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>나는 같은 문제를 생각 해냈고 그것을 해결했다!
<img :src='book.images.small' v-on:mouseenter="hoverImg">올바르게 작동하는 JSFiddle이 있습니다 : http://jsfiddle.net/1cekfnqw/176/
<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>새로운 컴포지션 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 - 마우스 오버 당신이 경우 패키지를 만족하지 이 코드 모양을 수행하는 방법 :
<div
@mouseover="isMouseover = true"
@mouseleave="isMouseover = false"
/>vue-mouseover 는 v-mouseover커서가 지시문이 첨부 된 HTML 요소에 들어가거나 나갈 때 지정된 데이터 컨텍스트 속성을 자동으로 업데이트 하는 지시문을 제공합니다 .
기본적으로 다음 예제 isMouseover속성은 true커서가 HTML 요소 위에 있거나 false그렇지 않은 경우입니다.
<div v-mouseover="isMouseover" />또한 기본적으로이 isMouseover됩니다 처음에 할당 할 때 v-mouseover받는 부착 div요소는 전에 먼저 할당되지 않은 남아 있지 않도록, mouseenter/의 mouseleave이벤트입니다.
지시문을 통해 사용자 정의 값 을 지정할 수 있습니다 v-mouseover-value.
<div
v-mouseover="isMouseover"
v-mouseover-value="customMouseenterValue"/>또는
<div
v-mouseover="isMouseover"
v-mouseover-value="{
mouseenter: customMouseenterValue,
mouseleave: customMouseleaveValue
}"
/>사용자 지정 기본값 은 설정 중에 옵션 개체 를 통해 패키지에 전달할 수 있습니다 .