মাউসওভার বা হোভার vue.js

104

Vue.js. তে কোনও উপাদানকে ঘুরিয়ে রেখে আমি একটি ডিভিটি দেখাতে চাই কিন্তু আমি এটি কাজ করে বলে মনে হচ্ছে না।

দেখে মনে হচ্ছে vue.js তে হোভার বা মাউসওভারের জন্য কোনও ইভেন্ট নেই। এটা কি সত্যি?

Jquery হোভার এবং vue পদ্ধতি একত্রিত করা সম্ভব হবে?

javascript  vue.js 
— অ্যান্ডারস অ্যান্ডারসন
সূত্র
2
"হোভার" ইভেন্টের জন্য ভি-অন নির্দেশিকাও কাজ করে। আপনি যদি আপনার প্রশ্নটিতে কোডটি লিখে থাকেন তবে আমরা সম্ভবত এটি কার্যকর করতে সহায়তা করতে পারি। এবং হ্যাঁ, ভ্যু সহজ এবং ছোট এবং jQuery এর মতো অন্যান্য প্যাকেজগুলির সাথে একীকরণের উদ্দেশ্যে intended
— ডেভিড কে। হেস

উত্তর:

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
নতুন vue সংস্করণ সঙ্গে কাজ করে না। @ সিওয়াইবি আপনার উত্তরটি সম্পাদনা করার চেষ্টা করেছিল v-on:mouseover="mouseOver"তবে সিনট্যাক্সের কোন সংস্করণ বদলেছে তা উল্লেখ করেনি
— এপ্রিলিয়ন
2
@ নিকোর আমার থেকে আরও ভাল সমাধান রয়েছে এবং এটি বর্তমান সংস্করণ (এই পোস্টের সময়ে 1.0.06) এর সাথে কাজ করে। দয়া করে তার উত্তর উল্লেখ করুন। ধন্যবাদ.
— জারোদ
1
আমি এটিকে মুছে ফেলতে চাই যেহেতু আমি কেবল বলেছি, @ নিকো নীচের পোস্টটি আমার চেয়ে ভাল, এবং আরও আধুনিক। অনুগ্রহ করে NICO কে সেই সঠিক উত্তরটি দিন, এবং আমি আমার মুছে ফেলব। ধন্যবাদ!
— জারোদ
2
উদাহরণটি কি ভেঙে গেছে?
— ব্যবহারকারী3743266
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
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত! গৃহীত এবং সর্বাধিক উত্সাহিত উত্তরের ফলে একটি ঝাঁকুনির উপাদান হয়। @ মাউসওভার-
— ডিভের
আপনি যদি স্পিচ বুদ্বুদের মতো কোনও লুকানো ডিভি দেখিয়ে থাকেন তবে আপনি মাউসওভারটিতে ঝাঁকুনি পাবেন। লুকানো ডিভিতে কেবল একই অসাধারণ মাউসওভার / মাউসলেভ কোড যুক্ত করুন।
— ম্যাকমেসারসন
আমার জন্য কাজ করে, ওয়েবপ্যাক দিয়ে কেবল আপনার ডেটা পরিবর্তন করতে হবে: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
  }
})
— নিকো
সূত্র
10
আপনি ব্যবহার করতে পারেন v-on:mouseoverঅথবা শর্টকাট @mouseoverডক্স প্রতি vuejs.org/guide/syntax.html#v-on-Shorthand
— নিউ এভারেস্ট
1
আপনি এইচটিএমএল ইভেন্টের বৈশিষ্ট্যগুলির onসাথে v-on:বা এর @জন্য প্রতিস্থাপন করতে পারেন । w3schools.com/tags/ref_eventattributes.asp
— নিউ এভারেস্ট
সমস্যা কি? এইটি কাজ করছে এবং সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত।
— NICO
ভ্যু ২.২.০ এটি পছন্দ করেন না - একটি সতর্কতা স্পিট করুন "[ভ্যু সতর্কতা]: ভ্য্যাকে <html> বা <body> তে মাউন্ট করবেন না - পরিবর্তে সাধারণ উপাদানগুলিতে মাউন্ট করবেন না।"
— ডিমা
সরলতার স্বার্থে আমি <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; }
— qsc vgy
সূত্র
1
প্রশ্নকর্তা vue.js সম্পর্কে বিশেষভাবে জিজ্ঞাসা করছেন যেহেতু এটি জাভাস্ক্রিপ্টটিকে সহজেই মাউসওভার ইভেন্টের সাথে আবদ্ধ হতে দেয়।
— এভারেস্ট এভেরেস্ট
5
আমি ভ্যু ব্যবহার করছি এবং এটি আমার পক্ষে সেরা সমাধান। আমার বাস্টগুলির সাথে নেস্টেড তালিকা রয়েছে যা কেবলমাত্র হোভারে উপস্থিত হওয়া উচিত এবং হোভারের স্থিতি ট্র্যাক করতে অতিরিক্ত ভেরিয়েবলগুলি ব্যবহার করা ওভারকিল। সিএসএস অনেক বেশি মার্জিত। ধন্যবাদ কিউএসসি!
— ডেভিড_নাশ
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
সূত্র
সিএসএস পোস্টপ্রসেসরগুলি উদাহরণস্বরূপ আপনি যদি এগুলি এ জাতীয়ভাবে গতিশীলভাবে তৈরি করেন তবে 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

কোনও উপাদানটির টেমপ্লেটের অভ্যন্তরে কঠোরভাবে হোভারে ক্লাস টগল করা সম্ভব, তবে এটি সুস্পষ্ট কারণের জন্য ব্যবহারিক সমাধান নয়। অন্যদিকে প্রোটোটাইপিংয়ের জন্য, স্ক্রিপ্টের মধ্যে ডেটা বৈশিষ্ট্য বা ইভেন্ট হ্যান্ডলারগুলি সংজ্ঞায়িত না করা আমার পক্ষে দরকারী।

আপনি ভুটিফাই ব্যবহার করে আইকন রঙগুলির সাথে কীভাবে পরীক্ষা করতে পারেন তার একটি উদাহরণ এখানে।

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
সূত্র
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"
/>

ভ্যু-মাউসওভার একটি সরবরাহ করেv-mouseover নির্দেশনা সরবরাহ করে যা স্বয়ংক্রিয়ভাবে নির্দিষ্ট ডেটা কনটেক্সট বৈশিষ্ট্য আপডেট করে যখন কার্সারটি এইচটিএমএল উপাদানটি প্রবেশ করে বা ফেলে দেয় যখন নির্দেশটি সংযুক্ত থাকে।

পরবর্তী উদাহরণে ডিফল্টরূপে isMouseoverসম্পত্তিটি trueযখন কার্সারটি এইচটিএমএল উপাদানের উপরে চলে যায় এবং falseঅন্যথায়:

<div v-mouseover="isMouseover" />

এছাড়াও ডিফল্টরূপে যখন উপাদানটির সাথে সংযুক্ত থাকে তখন প্রাথমিকভাবে নির্ধারিতisMouseover হবে , সুতরাং এটি প্রথম / ইভেন্টের আগে নিযুক্ত করা হবে না ।v-mouseoverdivmouseentermouseleave

আপনি নির্দেশের মাধ্যমে কাস্টম মান নির্দিষ্ট করতে পারেন v-mouseover-value:

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

অথবা

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

কাস্টম ডিফল্ট মানগুলি সেটআপের সময় অপশনগুলির মাধ্যমে প্যাকেজে যেতে পারে to

— এন কুদ্রিভতসেভ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.