So fügen Sie in Vue.js einen radialen Farbverlauf um den Mauszeiger auf dem Hintergrund einer Seite hinzu

Um eine Website aufzupeppen, beschließe ich, einen radialen Farbverlauf zu implementieren, der bei jeder Mausbewegung entlang der Bildschirmansicht um den Cursor herum leuchtet. Die folgende Implementierung ist an ein mit TypeScript erstelltes Vue.js-Projekt angepasst.

Um dieses Ergebnis zu erzielen, möchte ich der Einfachheit halber auch eine Bibliothek zur Geräteerkennung verwenden, und meine Wahl fällt auf ua-parser-js, genau die Version 2.0.0.

Der zweite und korallenrote Schritt ist die Erstellung einer Verlaufskomponente, die der Hauptbehälter der gesamten Ansicht sein muss, da es sich um den Bereich handelt, in dem der Verlauf leuchten wird.

// src/components/Gradient.vue

<script lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { isMobile } from '../utils/device'

export default {
  name: 'GradientView',
  setup() {
    const getViewCentrePosition = () => ({
      x: window.innerWidth / 2,
      y: window.innerHeight / 2
    })

    const cursorPositionRef = ref(getViewCentrePosition())

    const updateCursorPosition = (event: MouseEvent) => {
      if (!isMobile()) {
        cursorPositionRef.value = {
          x: event.clientX,
          y: event.clientY
        }
      }
    }

    onMounted(() => {
      if (!isMobile()) {
        window.addEventListener('mousemove', updateCursorPosition)
      }
    })

    onUnmounted(() => {
      if (!isMobile()) {
        window.removeEventListener('mousemove', updateCursorPosition)
      }
    })

    const gradientPosition = computed(() => {
      return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
    })

    return {
      gradientPosition
    }
  },
  data() {
    return {
      isMobileClass: isMobile()
    }
  }
}
</script>

<template>
  <div
    :class="{ 'gradient--desktop': !isMobileClass, gradient: true }"
    :style="{ '--gradient-position': gradientPosition }"
  >
    <slot />
  </div>
</template>

<style scoped lang="scss">
div {
  .gradient.gradient--desktop {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--secondary-color) 20%
    );
    width: 100vw;
    height: 100vh;
    overflow: scroll;

    @media (prefers-color-scheme: dark) {
      background-image: radial-gradient(
        circle at var(--gradient-position, 50% 50%),
        var(--tertiary-color),
        var(--primary-color) 20%
      );
    }
  }
}
</style>

Lassen Sie uns den Code verstehen. Im Skriptabschnitt habe ich eine Funktion, die einfach die Ausgangsposition, die Mitte der Bildschirmansicht, zurückgibt. Es könnte anders gehandhabt werden, zum Beispiel versteckt, oder an der oberen linken Position, die mit einer Animation nach dem ersten Mausauslöser erscheinen kann. Es handelt sich um eine Implementierungsentscheidung. Der Einfachheit halber füge ich es in der Mitte der Ansicht hinzu.

const getViewCentrePosition = () => ({
  x: window.innerWidth / 2,
  y: window.innerHeight / 2
})

Dann erstelle ich einen reaktiven Verweis auf das Objekt, das zum Verfolgen der Cursor-Mausbewegungen verwendet wird, die durch die Mausereignisse auftreten.

const cursorPositionRef = ref(getViewCentrePosition())

Dann implementierte ich die Funktion, die für die Aktualisierung des reaktiven Referenzobjekts nach jeder Cursor-Mausbewegung zuständig ist.

const updateCursorPosition = (event: MouseEvent) => {
  if (!isMobile()) {
    cursorPositionRef.value = {
      x: event.clientX,
      y: event.clientY
    }
  }
}

Diese Funktion muss mit den Mausereignissen verknüpft werden.

onMounted(() => {
  if (!isMobile()) {
    window.addEventListener('mousemove', updateCursorPosition)
  }
})

onUnmounted(() => {
  if (!isMobile()) {
    window.removeEventListener('mousemove', updateCursorPosition)
  }
})

Und schließlich berechne ich den reaktiven Wert der Gradientenposition, der dem CSS des Elements selbst bereitgestellt wird.

const gradientPosition = computed(() => {
  return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
})

Beachten Sie, dass ich in den meisten der oben beschriebenen Teile überprüfe, ob es sich bei dem erkannten Gerät um ein Mobilgerät handelt oder nicht, um unnötige Berechnungen zu vermeiden.

Anschließend erstelle ich in der Vorlage den HTML-Code des Farbverlaufs, der sich wie ein ganzer Seiten-Wrapper für den Inhalt verhält, und ich wende auch das entsprechende CSS an, nur bei Bedarf.

<template>
  <div
    :class="{ 'gradient--desktop': !isMobileClass, gradient: true }"
    :style="{ '--gradient-position': gradientPosition }"
  >
    <slot />
  </div>
</template>

Und das ist das CSS. Ich biete hier eine Lösung für eine Website an, die ein helles und ein dunkles Thema implementiert, und ich verwende zwei Farben für den Übergang, im äußeren Teil verwende ich die Farben --primary-color und --secondary-color, während es im inneren Teil der Fall ist Setup für beide Themes als --tertiary-color. Aber die Wahl und Abstimmung liegt bei Ihnen.

<style scoped lang="scss">
.gradient.gradient--desktop {
  background-image: radial-gradient(
    circle at var(--gradient-position, 50% 50%),
    var(--tertiary-color),
    var(--secondary-color) 20%
  );
  width: 100vw;
  height: 100vh;
  overflow: scroll;

  @media (prefers-color-scheme: dark) {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--primary-color) 20%
    );
  }
}
</style>

Schließlich ist dies, wie bereits erwähnt, das einzige Dienstprogramm, das zum Erkennen des Geräts verwendet wird.

// src/utils/device.ts

import { UAParser } from 'ua-parser-js'

export const isMobile = (): boolean => {
  const uap = new UAParser()
  return uap.getDevice().type === 'mobile'
}

Bessere Ideen? Ich bin neugierig, sie zu hören.

Das obige ist der detaillierte Inhalt vonSo fügen Sie in Vue.js einen radialen Farbverlauf um den Mauszeiger auf dem Hintergrund einer Seite hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!