Najechanie myszą lub najechanie kursorem na vue.js

Question 1

Chciałbym pokazać element div po najechaniu kursorem na element w vue.js. Ale nie wydaje mi się, żeby to działało.

Wygląda na to, że w vue.js. nie ma zdarzenia dla najechania myszą lub najechania myszą. Czy to prawda?

Czy byłoby możliwe połączenie metod jquery hover i vue?

Question 2

Oto roboczy przykład tego, o co myślę, że prosisz.

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

Question 3

wydaje mi się, że powyższa logika dla najechania myszą jest nieprawidłowa. po prostu odwraca się, gdy mysz się unosi. użyłem poniższego kodu. wydaje się, że działa doskonale.

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

w instancji vue

data : {
    upHere : false
}

Mam nadzieję, że to pomoże

Question 4

Tutaj nie ma potrzeby stosowania metody.

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

Question 5

Aby pokazać elementy potomne lub rodzeństwo, jest to możliwe tylko za pomocą CSS. Jeśli używasz :hoverprzed kombinatorów ( +, ~, >, space). Wtedy styl nie dotyczy elementu najechanego kursorem.

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

Question 6

Z mouseoveri mouseleavezdarzenia można zdefiniować funkcję przełączania, który implementuje ten logiczny i reagować na wartości w renderingu.

Sprawdź ten przykład:

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>

Rozwiń fragment

Question 7

Ponieważ mouseovertylko element pozostaje widoczny, gdy mysz opuści element najechany kursorem, dodałem:

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

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

Question 8

Możliwe jest przełączenie klasy po najechaniu kursorem ściśle w obrębie szablonu składnika, jednak nie jest to praktyczne rozwiązanie z oczywistych powodów. Z drugiej strony, przy tworzeniu prototypów uważam, że nie trzeba definiować właściwości danych ani programów obsługi zdarzeń w skrypcie.

Oto przykład, jak możesz eksperymentować z kolorami ikon za pomocą 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>

Rozwiń fragment

Question 9

Wpadłem na ten sam problem i rozwiązałem go!

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

Rozwiń fragment

Question 10

Jest poprawny działający JSFiddle: http://jsfiddle.net/1cekfnqw/176/

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

Question 11

Chociaż dałbym aktualizację przy użyciu nowego interfejsu API kompozycji.

Składnik

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

Funkcja kompozycji wielokrotnego użytku

Utworzenie useHoverfunkcji umożliwi ponowne użycie w dowolnych komponentach.

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
}

Oto krótki przykład wywołania funkcji w komponencie 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>

Możesz także użyć biblioteki, @vuehooks/corektóra zawiera wiele przydatnych funkcji, w tym useHover.

Question 12

Oto bardzo prosty przykład dla MouseOver i 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";
    }
  }
});

Question 13

Proszę spojrzeć na pakiet vue-mouseover , jeśli nie jesteś zadowolony, jak wygląda ten kod:

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

vue-mouseover udostępnia v-mouseoverdyrektywę, która automatycznie aktualizuje określoną właściwość kontekstu danych, gdy kursor wchodzi lub opuszcza element HTML, do którego jest dołączona dyrektywa.

Domyślnie w następnym przykładzie isMouseoverwłaściwość będzie miała miejsce, truegdy kursor znajduje się nad elementem HTML, a w falseprzeciwnym razie:

<div v-mouseover="isMouseover" />

Również domyślnie isMouseoverzostanie przypisany początkowo, gdy v-mouseoverzostanie dołączony do divelementu, więc nie pozostanie nieprzypisany przed pierwszym zdarzeniem mouseenter/ mouseleave.

Możesz określić wartości niestandardowe za pomocą v-mouseover-valuedyrektywy:

<div
    v-mouseover="isMouseover"
    v-mouseover-value="customMouseenterValue"/>

lub

<div
    v-mouseover="isMouseover"
    v-mouseover-value="{
        mouseenter: customMouseenterValue,
        mouseleave: customMouseleaveValue
    }"
/>

Niestandardowe wartości domyślne można przekazać do pakietu za pośrednictwem obiektu opcji podczas instalacji.

Answer 1

106

Chciałbym pokazać element div po najechaniu kursorem na element w vue.js. Ale nie wydaje mi się, żeby to działało.

Wygląda na to, że w vue.js. nie ma zdarzenia dla najechania myszą lub najechania myszą. Czy to prawda?

Czy byłoby możliwe połączenie metod jquery hover i vue?

javascript vue.js Anders Andersen
źródło

2

Dyrektywa v-on działa również dla zdarzenia „hover”. Jeśli dodasz do swojego pytania napisany kod, prawdopodobnie pomożemy Ci go uruchomić. I tak, Vue jest prosty i mały i przeznaczony do integracji z innymi pakietami, takimi jak jQuery.

David K. Hess

Answer 2

2

Dyrektywa v-on działa również dla zdarzenia „hover”. Jeśli dodasz do swojego pytania napisany kod, prawdopodobnie pomożemy Ci go uruchomić. I tak, Vue jest prosty i mały i przeznaczony do integracji z innymi pakietami, takimi jak jQuery.

David K. Hess

Answer 3

95

Oto roboczy przykład tego, o co myślę, że prosisz.

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
źródło

26

nie działa z najnowszą wersją vue. @CYB próbował edytować twoją odpowiedź, v-on:mouseover="mouseOver"ale nie wspomniał, w której wersji vue zmieniła się składnia

kwiecień

2

@NICO ma lepsze rozwiązanie niż moje i działa z aktualną wersją (1.0.26 w czasie tego postu). Proszę odnieść się do jego odpowiedzi. Dziękuję Ci.

Jarrod

1

Chciałbym to usunąć, ponieważ właśnie powiedziałem, poniższy post @NICO jest lepszy niż mój i bardziej aktualny. Proszę podać NICO poprawną odpowiedź, a ja usunę swoją. Dziękuję Ci!

Jarrod

2

przykład jest zepsuty?

user3743266

3

Myślę, że lepiej użyć krótkiej ręki @mouseover:mouseover

Davod Aslanifakor

Answer 4

26

nie działa z najnowszą wersją vue. @CYB próbował edytować twoją odpowiedź, v-on:mouseover="mouseOver"ale nie wspomniał, w której wersji vue zmieniła się składnia

kwiecień

Answer 5

2

@NICO ma lepsze rozwiązanie niż moje i działa z aktualną wersją (1.0.26 w czasie tego postu). Proszę odnieść się do jego odpowiedzi. Dziękuję Ci.

Jarrod

Answer 6

1

Chciałbym to usunąć, ponieważ właśnie powiedziałem, poniższy post @NICO jest lepszy niż mój i bardziej aktualny. Proszę podać NICO poprawną odpowiedź, a ja usunę swoją. Dziękuję Ci!

Jarrod

Answer 7

2

przykład jest zepsuty?

user3743266

Answer 8

3

Myślę, że lepiej użyć krótkiej ręki @mouseover:mouseover

Davod Aslanifakor

Answer 9

176

wydaje mi się, że powyższa logika dla najechania myszą jest nieprawidłowa. po prostu odwraca się, gdy mysz się unosi. użyłem poniższego kodu. wydaje się, że działa doskonale.

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

w instancji vue

data : {
    upHere : false
}

Mam nadzieję, że to pomoże

shakee93
źródło

15

To powinna być akceptowana odpowiedź! Zaakceptowana i najbardziej pozytywna odpowiedź skutkuje migotaniem składnika. Każdy ruch kursora na @ mouseover-div odwraca bieżący stan ...

Stefan Medack

Jeśli pokazujesz ukryty element div, taki jak dymek, po najechaniu kursorem myszy zacznie migotać. Po prostu dodaj ten sam niesamowity kod mouseover / mouseleave do ukrytego div.

mcmacerson,

U mnie działa, z webpackiem wystarczy zmienić swoje dane jako:data: () => ({ upHere: false })

Emile Cantero

Answer 10

15

To powinna być akceptowana odpowiedź! Zaakceptowana i najbardziej pozytywna odpowiedź skutkuje migotaniem składnika. Każdy ruch kursora na @ mouseover-div odwraca bieżący stan ...

Stefan Medack

Answer 11

Jeśli pokazujesz ukryty element div, taki jak dymek, po najechaniu kursorem myszy zacznie migotać. Po prostu dodaj ten sam niesamowity kod mouseover / mouseleave do ukrytego div.

mcmacerson,

Answer 12

U mnie działa, z webpackiem wystarczy zmienić swoje dane jako:data: () => ({ upHere: false })

Emile Cantero

Answer 13

77

Tutaj nie ma potrzeby stosowania metody.

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
źródło

10

Możesz użyć v-on:mouseoverskrótu lub skrótu @mouseoverz dokumentacji vuejs.org/guide/syntax.html#v-on-Shorthand

nu everest

1

Można wymienić onz v-on:lub @do jednego z atrybutów zdarzeń html. w3schools.com/tags/ref_eventattributes.asp

nu everest

Jaki jest problem? Ta odpowiedź działa i powinna zostać oznaczona jako poprawna.

NICO

Vue 2.2.0 tego nie lubi - wypluj ostrzeżenie "[Vue warn]: Nie montuj Vue do <html> lub <body> - zamiast tego zamontuj na zwykłych elementach."

Dima Fomin

Dla uproszczenia utworzyłem instancję <body> vue. Oczywiście nie powinieneś tego robić w swojej aplikacji w świecie rzeczywistym.

NICO

Answer 14

10

Możesz użyć v-on:mouseoverskrótu lub skrótu @mouseoverz dokumentacji vuejs.org/guide/syntax.html#v-on-Shorthand

nu everest

Answer 15

1

Można wymienić onz v-on:lub @do jednego z atrybutów zdarzeń html. w3schools.com/tags/ref_eventattributes.asp

nu everest

Answer 16

Jaki jest problem? Ta odpowiedź działa i powinna zostać oznaczona jako poprawna.

NICO

Answer 17

Vue 2.2.0 tego nie lubi - wypluj ostrzeżenie "[Vue warn]: Nie montuj Vue do <html> lub <body> - zamiast tego zamontuj na zwykłych elementach."

Dima Fomin

Answer 18

Dla uproszczenia utworzyłem instancję <body> vue. Oczywiście nie powinieneś tego robić w swojej aplikacji w świecie rzeczywistym.

NICO

Answer 19

25

Aby pokazać elementy potomne lub rodzeństwo, jest to możliwe tylko za pomocą CSS. Jeśli używasz :hoverprzed kombinatorów ( +, ~, >, space). Wtedy styl nie dotyczy elementu najechanego kursorem.

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
źródło

1

Pytający pyta konkretnie o vue.js. Ponieważ pozwala na łatwe powiązanie javascript ze zdarzeniem mouseover.

nu everest

5

Używam Vue i to jest dla mnie najlepsze rozwiązanie. Mam zagnieżdżoną listę z przyciskami, które powinny pojawiać się tylko po najechaniu kursorem, a używanie dodatkowych zmiennych do śledzenia stanu najechania jest przesadą. CSS jest znacznie bardziej elegancki. Dzięki qsc!

david_nash

Answer 20

1

Pytający pyta konkretnie o vue.js. Ponieważ pozwala na łatwe powiązanie javascript ze zdarzeniem mouseover.

nu everest

Answer 21

5

Używam Vue i to jest dla mnie najlepsze rozwiązanie. Mam zagnieżdżoną listę z przyciskami, które powinny pojawiać się tylko po najechaniu kursorem, a używanie dodatkowych zmiennych do śledzenia stanu najechania jest przesadą. CSS jest znacznie bardziej elegancki. Dzięki qsc!

david_nash

Answer 22

Z mouseoveri mouseleavezdarzenia można zdefiniować funkcję przełączania, który implementuje ten logiczny i reagować na wartości w renderingu.

Sprawdź ten przykład:

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>

Rozwiń fragment

Answer 23

Postprocesory css, np. purgecss, nie będą w stanie odebrać twoich klas, jeśli dynamicznie je zbudujesz w ten sposób. lepiej:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

Erich

Answer 24

Ponieważ mouseovertylko element pozostaje widoczny, gdy mysz opuści element najechany kursorem, dodałem:

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

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

Answer 25

Możliwe jest przełączenie klasy po najechaniu kursorem ściśle w obrębie szablonu składnika, jednak nie jest to praktyczne rozwiązanie z oczywistych powodów. Z drugiej strony, przy tworzeniu prototypów uważam, że nie trzeba definiować właściwości danych ani programów obsługi zdarzeń w skrypcie.

Oto przykład, jak możesz eksperymentować z kolorami ikon za pomocą 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>

Rozwiń fragment

Answer 26

2

Wpadłem na ten sam problem i rozwiązałem go!

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

Rozwiń fragment

LittleStupid
źródło

Answer 27

Jest poprawny działający JSFiddle: http://jsfiddle.net/1cekfnqw/176/

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

Answer 28

Chociaż dałbym aktualizację przy użyciu nowego interfejsu API kompozycji.

Składnik

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

Funkcja kompozycji wielokrotnego użytku

Utworzenie useHoverfunkcji umożliwi ponowne użycie w dowolnych komponentach.

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
}

Oto krótki przykład wywołania funkcji w komponencie 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>

Możesz także użyć biblioteki, @vuehooks/corektóra zawiera wiele przydatnych funkcji, w tym useHover.

Answer 29

Oto bardzo prosty przykład dla MouseOver i 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";
    }
  }
});

Answer 30

Proszę spojrzeć na pakiet vue-mouseover , jeśli nie jesteś zadowolony, jak wygląda ten kod:

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

vue-mouseover udostępnia v-mouseoverdyrektywę, która automatycznie aktualizuje określoną właściwość kontekstu danych, gdy kursor wchodzi lub opuszcza element HTML, do którego jest dołączona dyrektywa.

Domyślnie w następnym przykładzie isMouseoverwłaściwość będzie miała miejsce, truegdy kursor znajduje się nad elementem HTML, a w falseprzeciwnym razie:

<div v-mouseover="isMouseover" />

Również domyślnie isMouseoverzostanie przypisany początkowo, gdy v-mouseoverzostanie dołączony do divelementu, więc nie pozostanie nieprzypisany przed pierwszym zdarzeniem mouseenter/ mouseleave.

Możesz określić wartości niestandardowe za pomocą v-mouseover-valuedyrektywy:

<div
    v-mouseover="isMouseover"
    v-mouseover-value="customMouseenterValue"/>

lub

<div
    v-mouseover="isMouseover"
    v-mouseover-value="{
        mouseenter: customMouseenterValue,
        mouseleave: customMouseleaveValue
    }"
/>

Niestandardowe wartości domyślne można przekazać do pakietu za pośrednictwem obiektu opcji podczas instalacji.

Najechanie myszą lub najechanie kursorem na vue.js

Odpowiedzi:

Składnik

Funkcja kompozycji wielokrotnego użytku