vue.js를 마우스오버 또는 호버링합니다.
vue.js에서 요소 위를 맴돌 때 div를 보여주고 싶습니다.그런데 작동이 안 되는 것 같아요.
에 대한 이벤트가 없는 것 같습니다.hover아니면mouseovervue.js에서이게 정말로 사실일까요?
jquery hover와 vue method를 결합할 수 있을까요?
호버에 대한 위의 논리가 틀렸다고 생각합니다.마우스가 맴돌 때 반대로 움직이게 됩니다.저는 아래 코드를 사용했습니다.완벽하게 잘 작동하는 것 같습니다.
<div @mouseover="upHere = true" @mouseleave="upHere = false" >
<h2> Something Something </h2>
<some-component v-show="upHere"></some-component>
</div>
예를 들어
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;
}
}
});
여기서는 방법이 필요 없습니다.
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, @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>
예를 들어
data : {
activeHover : false
}
참고: 첫 번째 쌍은 하위 요소에도 영향을 미치며 이동하지만 두 번째 쌍은 하위 요소가 아닌 사용하려는 위치에만 영향을 미칩니다.그렇지 않으면 첫 번째 쌍을 사용하면 약간의 결함/변동이 발생합니다.따라서 변동을 피하기 위해 두 번째 쌍을 사용하는 것이 좋습니다.
다른 사람들에게도 도움이 되었으면 좋겠습니다 :)
비록 새로운 composition 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>
당신은 또한 다음과 같은 많은 유용한 기능들과 함께 제공되는 등의 라이브러리를 사용할 수 있습니다.useHover.
참조:Vuejs구성 API
구성 요소의 템플릿 내에서 호버에 있는 클래스를 엄격히 전환할 수 있지만 분명한 이유로 실용적인 솔루션이 아닙니다.반면 프로토타이핑의 경우 스크립트 내에서 데이터 속성이나 이벤트 핸들러를 정의할 필요가 없는 것이 유용하다고 생각합니다.
다음은 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마우스가 회전하는 요소를 떠날 때 요소만 계속 눈에 띄기 때문에 다음과 같이 추가했습니다.
@mouseover="active = !active" @mouseout="active = !active"
<script>
export default {
data(){
return {
active: false
}
}
</script>
저도 같은 문제를 생각해 냈고, 해결해냈어요!
<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>
이 코드가 어떻게 보이는지 만족스럽지 않다면 뷰 마우스오버 패키지를 살펴보세요.
<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
}"
/>
설정하는 동안 옵션 개체를 통해 사용자 지정 기본값을 패키지로 전달할 수 있습니다.
다음은 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";
}
}
});
이것은 나에게 next를 위해 효과가 있었습니다.
<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>
VueUse 합성어를 사용할 수도 있습니다.
<script setup>
import { useElementHover } from '@vueuse/core'
const myHoverableElement = ref()
const isHovered = useElementHover(myHoverableElement)
</script>
<template>
<button ref="myHoverableElement">
{{ isHovered }}
</button>
</template>
import { useMouse } from '@vueuse/core'
const { x, y, sourceType } = useMouse()
혹은 특정한 요소에 있어서도.
TLDR: Vue2/Vue3 앱을 위한 몇 가지 편리한 컴포지트!
언급URL : https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js
'programing' 카테고리의 다른 글
| JPA 최대 절전 모드 지속성 예외 [Persistence Unit: default] 최대 절전 모드 세션 팩토리를 만들 수 없습니다. (0) | 2023.11.07 |
|---|---|
| ORA-06502: PL/SQL: 숫자 또는 값 오류: 문자열 버퍼가 C# 코드에서 너무 작은 예외입니다. (0) | 2023.11.07 |
| mysql 쿼리에서 오프셋 및 제한을 사용하여 순서 추가 (0) | 2023.11.07 |
| npm 스크립트를 사용하여 js 파일을 어떻게 실행합니까? (0) | 2023.11.07 |
| 문자열이 null로 종료되는 이유는 무엇입니까?또는: null-terminal vs. 문자 + 길이 저장 (0) | 2023.11.07 |