Fareyle üzerine gelme veya üzerine gelme vue.js

Question 1

Vue.js'de bir öğenin üzerine geldiğimde bir div göstermek istiyorum. Ama işe yarayacak gibi görünmüyorum.

Görünüşe göre vue.js'de fareyle üzerine gelme veya fareyle üzerine gelme etkinliği yok. Bu gerçekten doğru mu?

Jquery hover ve vue yöntemlerini birleştirmek mümkün olabilir mi?

Question 2

İşte istediğini düşündüğüm şeyin çalışan bir örneği.

 <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

Üzerine gelme mantığının yanlış olduğunu hissediyorum. sadece fare gezindiğinde tersine döner. aşağıdaki kodu kullandım. mükemmel çalışıyor gibi görünüyor.

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

vue örneğinde

data : {
    upHere : false
}

umarım yardımcı olur

Question 4

Burada bir yönteme gerek yok.

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

Alt öğe veya kardeş öğeleri göstermek yalnızca CSS ile mümkündür. Eğer kullanırsanız :hover, bağdaştırıcılarla önce ( +, ~, >, space). Bu durumda stil, üzerine gelinen öğeye uygulanmaz.

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

mouseoverVe mouseleaveolayları ile bu mantığı uygulayan ve işlemedeki değere tepki veren bir geçiş işlevi tanımlayabilirsiniz.

Bu örneği kontrol edin:

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>

Snippet'i genişlet

Question 7

İle mouseovertek unsur kalır görünür ben bu ilave fare yaprakları Vurgulanan eleman, bu nedenle zaman:

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

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

Question 8

Kesinlikle bir bileşenin şablonunda bir sınıfın üzerine gelindiğinde geçiş yapmak mümkündür, ancak bariz nedenlerden dolayı pratik bir çözüm değildir. Öte yandan prototipleme için, komut dosyası içinde veri özelliklerini veya olay işleyicilerini tanımlamak zorunda kalmamayı faydalı buluyorum.

Vuetify kullanarak simge renklerini nasıl deneyebileceğinize dair bir örnek.

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>

Snippet'i genişlet

Question 9

Ben de aynı problemi buldum ve çözüyorum!

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

Snippet'i genişlet

Question 10

Doğru çalışan bir JSFiddle var: http://jsfiddle.net/1cekfnqw/176/

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

Question 11

Yine de yeni kompozisyon api'sini kullanarak bir güncelleme verecektim.

Bileşen

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

Yeniden Kullanılabilir Kompozisyon İşlevi

Bir useHoverişlev oluşturmak , herhangi bir bileşende yeniden kullanmanıza izin verir.

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
}

İşte bir Vue bileşeninin içindeki işlevi çağıran hızlı bir örnek.

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

Ayrıca @vuehooks/coredahil olmak üzere birçok yararlı işlevle birlikte gelen bir kitaplığı da kullanabilirsiniz useHover.

Question 12

MouseOver ve MouseOut için çok basit bir örnek:

<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

Bir göz atın lütfen vue-mouseover sen eğer paketin memnun değil bu kod görünüm nasıl yaptığını:

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

vue-mouseoverv-mouseover , imleç direktifin eklendiği bir HTML öğesine girdiğinde veya bu öğeden çıktığında belirtilen veri bağlamı özelliğini otomatik olarak güncelleyen bir yönerge sağlar .

Bir sonraki örnekte varsayılan olarak isMouseoverözellik true, imleç bir HTML öğesinin üzerindeyken ve falseaksi halde:

<div v-mouseover="isMouseover" />

Ayrıca varsayılan olarak isMouseoveredilecektir başlangıçta atanmış zaman v-mouseovertakılır diveleman ilk önce atanmamış kalmayacaktır yüzden, mouseenter/ 'mouseleave olayı.

Yönerge aracılığıyla özel değerler belirtebilirsiniz v-mouseover-value:

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

veya

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

Özel varsayılan değerler , kurulum sırasında seçenekler nesnesi aracılığıyla pakete geçirilebilir .