Arahkan mouse atau arahkan vue.js

104

Saya ingin menunjukkan div saat mengarahkan kursor ke elemen di vue.js. Tapi sepertinya aku tidak bisa membuatnya bekerja.

Sepertinya tidak ada peristiwa untuk hover atau mouseover di vue.js. Benarkah ini?

Apakah mungkin untuk menggabungkan metode jquery hover dan vue?

javascript vue.js

— Anders Andersen
sumber

2

v-on direktif juga dapat digunakan untuk acara "hover". Jika Anda menambahkan kode yang telah Anda tulis ke pertanyaan Anda, kami mungkin dapat membantu Anda membuatnya berfungsi. Dan ya, Vue sederhana dan kecil dan dimaksudkan untuk diintegrasikan dengan paket lain seperti jQuery.

— David K. Hess

93

Berikut adalah contoh kerja dari apa yang menurut saya Anda minta.

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
sumber

26

tidak berfungsi dengan versi vue terbaru. @CYB mencoba mengedit jawaban Anda v-on:mouseover="mouseOver"tetapi tidak menyebutkan versi vue mana yang sintaksnya berubah

— Aprillion

2

@NICO memiliki solusi yang lebih baik daripada milik saya dan bekerja dengan versi saat ini (1.0.26 pada saat posting ini). Mohon referensi jawabannya. Terima kasih.

— Jarrod

1

Saya ingin menghapus ini karena saya baru saja menyatakan, postingan di bawah oleh @NICO lebih baik daripada milik saya, dan lebih mutakhir. Tolong beri NICO jawaban yang benar, dan saya akan menghapus milik saya. Terima kasih!

— Jarrod

2

contohnya rusak?

— pengguna3743266

3

saya pikir lebih baik menggunakan tangan pendek @mouseover:mouseover

— Davod Aslanifakor

176

Saya merasa logika di atas untuk hover tidak benar. itu hanya terbalik saat mouse melayang. saya telah menggunakan kode di bawah ini. tampaknya bekerja dengan baik.

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

pada vue instance

data : {
    upHere : false
}

Semoga membantu

— goyang93
sumber

15

Ini harus menjadi jawaban yang diterima! Jawaban yang diterima dan paling banyak disukai memang menghasilkan komponen yang berkedip-kedip. Setiap gerakan kursor pada @ mouseover-div membalikkan keadaan saat ini ...

— Stefan Medack

Jika Anda menampilkan div tersembunyi seperti balon bicara, Anda akan berkedip saat gerakan mouse. Cukup tambahkan kode mouseover / mouseleave mengagumkan yang sama ke div tersembunyi juga.

— mcmacerson

Berfungsi untuk saya, dengan webpack hanya perlu mengubah data Anda sebagai:data: () => ({ upHere: false })

— Emile Cantero

77

Tidak perlu metode di sini.

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
sumber

10

Anda dapat menggunakan salah satu v-on:mouseoveratau pintasan @mouseoversesuai dengan dokumen vuejs.org/guide/syntax.html#v-on-Shorthand

— nu everest

1

Anda dapat mengganti ondengan v-on:atau @untuk atribut peristiwa html apa pun. w3schools.com/tags/ref_eventattributes.asp

— nu everest

Apa masalahnya? Yang ini berfungsi dan harus ditandai sebagai jawaban yang benar.

— NICO

Vue 2.2.0 tidak menyukai ini - ludahkan peringatan "[Vue warn]: Jangan pasang Vue ke <html> atau <body> - pasang ke elemen normal."

— Dima Fomin

Demi kesederhanaan, saya membuat <body> sebagai instance vue. Tentu saja Anda tidak boleh melakukan itu di aplikasi dunia nyata Anda.

— NICO

25

Untuk menampilkan elemen anak atau saudara, dimungkinkan hanya dengan CSS. Jika Anda menggunakan :hoversebelum combinators ( +, ~, >, space). Kemudian gaya diterapkan untuk tidak elemen yang di-hover.

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
sumber

1

Penanya secara khusus menanyakan tentang vue.js. Karena memungkinkan javascript dengan mudah terikat ke acara gerakan mouse.

— nu everest

5

Saya menggunakan Vue dan ini adalah solusi terbaik untuk saya. Saya memiliki daftar bersarang dengan tombol yang seharusnya hanya muncul saat mengarahkan kursor, dan menggunakan variabel tambahan untuk melacak status hover berlebihan. CSS jauh lebih elegan. Terima kasih qsc!

— david_nash

13

Dengan peristiwa mouseoverdan mouseleaveAnda dapat menentukan fungsi sakelar yang mengimplementasikan logika ini dan bereaksi pada nilai dalam rendering.

Lihat contoh ini:

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>

Luaskan cuplikan

— fitorec.dll
sumber

css postprocessors, misalnya, purgecss tidak akan dapat mengambil kelas Anda jika Anda membangunnya secara dinamis seperti ini. lebih baik:@mouseover="btn-color='btn-warning' @mouseleave="btn-color='btn-primary' :class="btn btn-block { btn-color}"

— Erich

7

Dengan mouseoverhanya elemen yang tetap terlihat saat mouse meninggalkan elemen yang di-hover, jadi saya menambahkan ini:

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

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

— tuan rumah terbaik
sumber

6

Dimungkinkan untuk mengganti kelas dengan hover secara ketat di dalam template komponen, namun, ini bukan solusi praktis karena alasan yang jelas. Di sisi lain, untuk pembuatan prototipe, saya merasa berguna untuk tidak perlu mendefinisikan properti data atau penangan kejadian di dalam skrip.

Berikut adalah contoh bagaimana Anda dapat bereksperimen dengan warna ikon menggunakan 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>

Luaskan cuplikan

— DigitalDrifter
sumber

2

Saya datang dengan masalah yang sama, dan saya menyelesaikannya!

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

Luaskan cuplikan

— LittleStupid
sumber

2

Ada JSFiddle yang berfungsi dengan benar: http://jsfiddle.net/1cekfnqw/176/

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

— funkvn
sumber

1

Meskipun saya akan memberikan pembaruan menggunakan api komposisi baru.

Komponen

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

Fungsi Komposisi yang Dapat Digunakan Kembali

Membuat sebuah useHoverfungsi akan memungkinkan Anda untuk menggunakan kembali komponen apa pun.

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
}

Berikut adalah contoh singkat yang memanggil fungsi di dalam komponen 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>

Anda juga dapat menggunakan pustaka seperti @vuehooks/coreyang dilengkapi dengan banyak fungsi berguna termasuk useHover.

— jsbroks.dll
sumber

0

Berikut adalah contoh yang sangat sederhana untuk MouseOver dan 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";
    }
  }
});

— Hardik Raval
sumber

0

Silakan lihat paket vue-mouseover jika Anda tidak puas dengan tampilan kode ini:

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

vue-mouseover memberikan v-mouseoverarahan yang secara otomatis memperbarui properti konteks data yang ditentukan ketika kursor masuk atau meninggalkan elemen HTML direktif dilampirkan.

Secara default di isMouseoverproperti contoh berikutnya adalah trueketika kursor berada di atas elemen HTML dan falsesebaliknya:

<div v-mouseover="isMouseover" />

Juga secara default isMouseoverakan ditetapkan pertama kali saat v-mouseoverdilampirkan ke divelemen, sehingga tidak akan tetap ditetapkan sebelum mouseenter/ mouseleaveacara pertama .

Anda dapat menentukan nilai kustom melalui v-mouseover-valuedirektif:

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

atau

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

Nilai default kustom dapat diteruskan ke paket melalui objek opsi selama penyiapan.

— N. Kudryavtsev
sumber