Změňte obrázek při najetí myší pomocí Vue

Chcete si například vytvořit portfolio svých projektů. Bylo by skvělou funkcí na vašich webových stránkách, aby se obrázek vašeho projektu pohyboval na myši.

S tímto malým tutoriálem vám umožní aktivovat .gif, když najedete na obrázek.

1. Nastavte projekt vue

Vytvořte svůj projekt vue, postupujte podle kroků a cd do toho.

vue create vue-hover-picture

2. Vyčistit projekt

Za tímto účelem se budeme držet HelloWorld.vue komponent. Zbavte se veškerého kódu v obou HelloWorld.vue a App.vue komponenta.

Načtěte obrázek do HelloWorld.vue komponent, jako níže.

<template>
  <div class="hello">
    <img :src="pictureStatic">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png")
    }
  }
}
</script>

<style scoped> 
img {
  height: 500px;
}
</style>

Nyní máme obrázek načtený v naší komponentě. Chceme, aby se tento obrázek stal .gif když se vznášíme.

3. Funkce přechodu

Ve vue můžeme použít @mouseover a @mouseleave Události. Můžeme předat booleovský hover kde bude true v @mouseover událost a, překvapení, false s @mouseleave .

Když to používáme v našem kódu a dále ve funkci, přidejte to do našich dat a nastavte je na false . Pojďme také importovat naše .gif .

export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png"),
      pictureGif: require("../assets/todo.gif"),
      hover: false
    }
  }
}

Dále použijeme funkci k určení src našeho obrazu, ať už je vznášen nebo ne.

Přidejte computed část a napište novou funkci, nazvěme ji pictureHover . Můžeme tedy napsat jednoduchou funkci pomocí hover jako naše podmíněné prohlášení.

computed: {
    pictureHover () {
      if (this.hover == true) {
        return this.pictureGif
      } else {
        return this.pictureStatic
      }
    }
  }

Nyní bychom měli změnit náš html kód obrázku. Tuto funkci můžeme předat pictureHover() na naše src atribut našeho obrázku:

<img :src="pictureHover" @mouseover="hover = true" @mouseleave="hover = false">

A to je vše! Nyní můžete vložit malý živý náhled svého projektu, když lidé umístí na obrázek.