Наведите или наведите курсор мыши на vue.js

106

Я хотел бы показать div при наведении курсора на элемент в vue.js. Но я не могу заставить его работать.

Похоже, что в vue.js. нет событий для наведения или наведения курсора мыши. Это правда?

Можно ли комбинировать методы jquery hover и vue?

javascript vue.js Андерс Андерсен
источник
2
Директива v-on также работает для события "зависания". Если вы добавите к своему вопросу код, который вы написали, мы, вероятно, сможем помочь вам заставить его работать. И да, Vue простой и маленький, он предназначен для интеграции с другими пакетами, такими как jQuery.
Дэвид К. Хесс

Ответы:

95

Вот рабочий пример того, о чем, я думаю, вы просите.

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;   
        }
    }
});
Джаррод
источник
26
не работает с последней версией vue. @CYB попытался отредактировать ваш ответ, v-on:mouseover="mouseOver"но не упомянул, в какой версии vue был изменен синтаксис
апрель
2
@NICO имеет лучшее решение, чем мое, и работает с текущей версией (1.0.26 на момент публикации). Пожалуйста, укажите его ответ. Спасибо.
Джаррод
1
Я хотел бы удалить это, поскольку я только что сказал, что пост @NICO ниже лучше моего и более актуален. Пожалуйста, дайте NICO правильный ответ, и я удалю свой. Спасибо!
Джаррод
2
пример не работает?
user3743266
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
}

надеюсь, это поможет

трясти93
источник
15
Это должен быть принятый ответ! Принятый и получивший наибольшее количество голосов ответ действительно приводит к мерцанию компонента. Каждое движение курсора на @ mouseover-div инвертирует текущее состояние ...
Стефан Медак
Если вы показываете скрытый div в виде речевого пузыря, вы будете мерцать при наведении указателя мыши. Просто добавьте тот же замечательный код mouseover / mouseleave к скрытому div.
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
  }
})
НИКО
источник
10
Вы можете использовать либо v-on:mouseoverярлык, либо ярлык, @mouseoverкак указано в документации vuejs.org/guide/syntax.html#v-on-Shorthand
nu everest
1
Вы можете заменить onс v-on:или @для любого из атрибутов HTML событий. w3schools.com/tags/ref_eventattributes.asp
ню, эверест,
В чем проблема? Этот работает и должен быть отмечен как правильный ответ.
NICO
Vue 2.2.0 это не нравится - предупредите: «[Предупреждение Vue]: не монтируйте Vue на <html> или <body> - вместо этого монтируйте к нормальным элементам.»
Дима Фомин
Для простоты я сделал <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>
Развернуть фрагмент

фитореч
источник
Постпроцессоры 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>
лучший хост
источник
7

Можно переключить класс при наведении курсора строго внутри шаблона компонента, однако это не практичное решение по очевидным причинам. С другой стороны, для прототипирования я считаю полезным не определять свойства данных или обработчики событий в сценарии.

Вот пример того, как вы можете поэкспериментировать с цветами значков с помощью 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
источник
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

Пожалуйста , обратите внимание на вю-наведении курсора мыши пакет , если вы не удовлетворены , как делает этот код вид:

<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
    }"
/>

Пользовательские значения по умолчанию могут быть переданы в пакет через объект параметров во время установки.

Н. Кудрявцев
источник