माउसओवर या होवर vue.js

104

मैं vue.js. में एक तत्व पर मंडराते हुए एक div दिखाना चाहूंगा लेकिन मुझे लगता है कि यह काम नहीं कर सकता।

ऐसा लगता है कि vue.js. में होवर या माउसओवर के लिए कोई घटना नहीं है क्या यह वास्तव में सच है?

क्या jquery होवर और vue विधियों को संयोजित करना संभव होगा?

javascript vue.js

2

"होवर" इवेंट के लिए v- ऑन डायरेक्टिव काम भी करता है। यदि आप अपने प्रश्न में जो कोड आपने लिखा है उसे जोड़ सकते हैं, तो शायद आप इसे काम करने में मदद कर सकें। और हाँ, 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;   
        }
    }
});

— जारोड
स्रोत

26

नवीनतम संस्करण के साथ काम नहीं करता है। @ CYB ने आपके उत्तर को संपादित करने की कोशिश की, v-on:mouseover="mouseOver"लेकिन इस बात का उल्लेख नहीं किया कि वाक्यविन्यास के किस संस्करण में परिवर्तन हुआ है

— Aprillion

2

@NICO के पास मेरे मुकाबले बेहतर समाधान है और वर्तमान संस्करण (इस पोस्ट के समय 1.0.26) के साथ काम करता है। कृपया उसके उत्तर का संदर्भ लें। धन्यवाद।

— जारोद 15

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>

उदाहरण के लिए

data : {
    upHere : false
}

उम्मीद है की वो मदद करदे

— shakee93
स्रोत

15

यह स्वीकृत उत्तर होना चाहिए! स्वीकार किए जाते हैं और सबसे उत्कीर्ण जवाब एक चंचल घटक में परिणाम है। @ माउसओवर-

— डिविज़न

यदि आप एक भाषण बुलबुले की तरह एक छिपे हुए div दिखा रहे हैं, तो आप माउसओवर पर फ़्लिकर करेंगे। बस उसी भयानक माउसओवर / मूसलीव्यू कोड को छिपे हुए div में जोड़ें।

— mcmacerson

मेरे लिए काम करता है, वेबपैक के साथ बस अपना डेटा बदलना है:data: () => ({ upHere: false })

— एमिल कैंटरो

77

यहां किसी विधि की आवश्यकता नहीं है।

एचटीएमएल

<div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

जे एस

new Vue({
  el: 'body',
  data: {
    active: false
  }
})

— NICO
स्रोत

10

आप डॉक्स vuejs.org/guide/syntax.html#v-on-Shorthandv-on:mouseover@mouseover

— nu everest

1

आप HTML घटना विशेषताओं में से किसी के onसाथ v-on:या उसके @लिए प्रतिस्थापित कर सकते हैं । w3schools.com/tags/ref_eventattributes.asp

— nu everest

समस्या क्या है? यह एक काम कर रहा है और इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए।

— NICO

Vue 2.2.0 को यह पसंद नहीं है - एक चेतावनी थूकें "[Vue चेतावनी]: Vue को <html> या <body> - के बजाय सामान्य तत्वों पर माउंट न करें।"

— Dima Fomin

सादगी के लिए मैंने <body> एक वाउ उदाहरण बनाया। बेशक आप अपने असली दुनिया आवेदन में ऐसा नहीं करना चाहिए।

— निको

25

बाल या भाई तत्वों को दिखाने के लिए यह केवल सीएसएस के साथ संभव है। आप का उपयोग करते हैं :hovercombinators से पहले ( +, ~, >, space)। तब शैली हॉवर किए गए तत्व पर लागू नहीं होती है।

एचटीएमएल

<body>
  <div class="trigger">
    Hover here.
  </div>
  <div class="hidden">
    This message shows up.
  </div>
</body>

सीएसएस

.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }

— क्यूएससी विजी
स्रोत

1

प्रश्नकर्ता विशेष रूप से vue.js. के बारे में पूछ रहा है चूंकि यह जावास्क्रिप्ट को आसानी से माउसओवर इवेंट के लिए बाध्य करता है।

— nu सदाबहार

5

मैं वीयू का उपयोग कर रहा हूं और यह मेरे लिए सबसे अच्छा समाधान है। मेरे पास बटन के साथ एक नेस्टेड सूची है जो केवल होवर पर दिखाई देनी चाहिए, और होवर स्थिति को ट्रैक करने के लिए अतिरिक्त चर का उपयोग करना ओवरकिल है। सीएसएस बहुत अधिक सुरुचिपूर्ण है। धन्यवाद 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>

— besthost
स्रोत

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>

— funkvn
स्रोत

1

हालांकि मैं नई रचना एपीआई का उपयोग करके एक अपडेट दे दूंगा।

अंग

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

यहाँ एक त्वरित उदाहरण एक पु घटक के अंदर फ़ंक्शन को बुला रहा है।

<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

यहाँ माउसओवर और माउसओट के लिए एक बहुत ही सरल उदाहरण दिया गया है:

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

कस्टम डिफ़ॉल्ट मानों को सेटअप के दौरान विकल्प ऑब्जेक्ट के माध्यम से पैकेज में भेजा जा सकता है ।

— एन। कुद्र्यावत्सेव
स्रोत