Наведення миші або вказівник миші vue.js

104

Я хотів би показати div при наведенні на елемент у vue.js. Але я не можу здатися, що це працює.

Схоже, що в vue.js немає події для наведення курсору чи миші. Це справді правда?

Чи можна було б комбінувати методи jquery hover та vue?

javascript vue.js

2

v-on директива також працює для "hover" події також. Якщо ви додасте до свого запитання написаний вами код, можливо, ми можемо допомогти вам працювати. І так, Vue простий і маленький і призначений для інтеграції з іншими пакетами, такими як jQuery.

— Девід К. Хесс

93

Ось робочий приклад того, що я думаю, що ви просите.

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;   
        }
    }
});

— Jarrod
джерело

26

не працює з новітньою версією vue. @CYB намагався відредагувати свою відповідь, v-on:mouseover="mouseOver"але не згадав, у якій версії vue змінився синтаксис

— квітня 1616

2

@NICO має краще рішення, ніж моя, і працює з поточною версією (1.0.26 на час цієї публікації). Будь ласка, посилайтесь на його відповідь. Дякую.

— Jarrod

1

Я хотів би видалити це, оскільки я нещодавно заявив, що повідомлення нижче від @NICO є кращим, ніж моє, і більш сучасним. Будь ласка, дайте правильну відповідь NICO, і я видалю свою. Дякую!

— Jarrod

2

приклад зламаний?

— користувач3743266

3

Я думаю, краще використовувати коротку руку @mouseover:mouseover

— Давод Асланіфакор

176

я вважаю, що вище логіки для наведення невірно. вона просто обернена, коли миша зависає. я використовував код нижче. це, здається, працює прекрасно.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

на екземпляр vue

data : {
    upHere : false
}

Сподіваюся, що це допомагає

— shakee93
джерело

15

Це має бути прийнята відповідь! Прийнята і найбільш схвалена відповідь призводить до мерехтливої складової. Кожен рух курсору на @ mouseover-div інвертує поточний стан ...

— Стефан Медак

Якщо ви показуєте прихований дів, як спливаючу підказку, ви будете мерехтіти на миші. Просто додайте той самий дивовижний код миші / mouseleave до прихованого поділу.

— mcmacerson

Для мене працює, з веб-пакетом просто потрібно змінити ваші дані як:data: () => ({ upHere: false })

— Еміль Кантеро

77

Тут немає необхідності в методі.

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
  }
})

— NICO
джерело

10

Ви можете використовувати v-on:mouseoverабо ярлик @mouseoverдля docs vuejs.org/guide/syntax.html#v-on-Shorthand

— nu everest

1

Ви можете замінити onз v-on:або @для будь-якого з атрибутів HTML подій. w3schools.com/tags/ref_eventattributes.asp

— nu everest

В чому проблема? Цей працює і має бути позначений як правильна відповідь.

— NICO

Vue 2.2.0 цього не любить - плюньте попередження "[Vue warn]: Не монтуйте Vue на <html> або <body> - замість цього монтуйте до нормальних елементів".

— Dima Fomin

Для простоти я зробив <body> vue екземпляр. Звичайно, ви не повинні робити цього в реальному застосуванні.

— NICO

25

Показувати дочірні або братові елементи можливо лише за допомогою 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; }

— qsc vgy
джерело

1

Опитуючий спеціально запитує про vue.js. Оскільки це дозволяє легко прив'язати JavaScript до події миші.

— nu everest

5

Я використовую Vue, і це найкраще рішення для мене. У мене є вкладений список з кнопками, які повинні з’являтися лише на наведення курсору, а використання додаткових змінних для відстеження стану наведення курсом є надмірним. CSS набагато елегантніше. Дякую qsc!

— david_nash

13

З 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>

Розгорніть фрагмент

— fitorec
джерело

css постпроцесори, наприклад purgecss, не зможуть підібрати ваші класи, якщо ви динамічно будувати їх таким чином. краще:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

— Еріх

7

Якщо mouseoverелемент залишається видимим лише тоді, коли миша залишає елемент, що завис, тому я додав це:

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

— бестхост
джерело

6

Можна клацнути клавішу на наведення курса строго в шаблоні компонента, однак це не практичне рішення з очевидних причин. З іншого боку, для прототипування мені здається корисним не визначати властивості даних або обробники подій у сценарії.

Ось приклад того, як можна експериментувати з кольорами значків за допомогою 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>

Розгорніть фрагмент

— DigitalDrifter
джерело

2

Я придумав ту саму проблему, і я її опрацьовую!

        <img :src='book.images.small' v-on:mouseenter="hoverImg">

Розгорніть фрагмент

— LittleStupid
джерело

2

Є правильний робочий JSFiddle: http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>

— функвн
джерело

1

Хоча я б дав оновлення, використовуючи новий склад 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.

— jsbroks
джерело

0

Ось дуже простий приклад для 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";
    }
  }
});

— Хардік Раваль
джерело

0

Будь ласка, подивіться на пакет vue-mouseover, якщо ви не задоволені, як виглядає цей код:

<div
    @mouseover="isMouseover = true"
    @mouseleave="isMouseover = false"
/>

vue-mouseover надає av-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
    }"
/>

Користувацькі значення за замовчуванням можна передавати в пакет через об'єкт параметрів під час налаштування.

— Н. Кудрявцев
джерело