Vue.Js Mouse Kordinatlarını Alma

sezaialkan
Sezai Alkan Frontend Developer

Vue.Js de ana divimizde veya ana divimizin içersindeki herhangi bir nesnenin üzerindeyken mouse un kordinatlarını veya mouse takibini mousemove özelliği ile yapabiliyoruz.

<div id="status">
    <span v-on:mousemove="cordinat" class="kutu">X : {{ x }} Y : {{ y }}</span>
</div>

status ana divimizin altındaki span etiketine daha iyi anlaşılır olması için kutu class ı ile yükseklik ve genişlik verdim. v-on:mousemove ile mouse un nesne üzerine gelince takibini yapıyoruz. istersek 

<span @mousemove="cordinat" class="kutu">X : {{ x }} Y : {{ y }}</span>

v-on:mousemove yerine @mousemove şeklinde daha kısa ve anlaşılır halini kullanabiliriz.

<script type="text/javascript">
    new Vue({
        el : '#status',
        data : {
            x : 0,
            y : 0
        },
        methods : {
            cordinat : function (){
                this.x = event.clientX;
                this.y = event.clientY;
            }
        }
    });
</script>

Mouse tabikini cordinat fonkisyonumuzun içersinde x ve y değişkenlerine event.clientX ve event.clientY Yardımıyla nesne üzerinde mouse hareket ettiği takdirde verecektir.

.kutu Class

<style type="text/css">
        .kutu {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
</style>

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol