如何在 Vue.js 中頁面背景上的滑鼠遊標周圍新增徑向漸變

為了給網站增添趣味，我決定在每次滑鼠沿著螢幕視圖移動時，實現在遊標周圍閃爍的徑向漸變。以下實作適用於使用 TypeScript 建置的 Vue.js 專案。

為了達到這個結果，為了簡單起見，我還想使用一個用於設備檢測的庫，我選擇了 ua-parser-js，確切地說是 2.0.0 版本。

第二個珊瑚步驟是創建漸變組件，它必須是所有視圖的主要容器，因為它將是漸變發光的區域。

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

讓我們理解程式碼。在腳本部分，我有一個函數，它只返回初始位置，即螢幕視圖的中心。它可以以不同的方式處理，例如隱藏，或者在第一次滑鼠觸發後可以透過動畫出現在左上角位置。這是一個實施選擇。為了簡單起見，我將其添加到視圖的中心。

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

最後，我計算漸變位置的反應值，該值將提供給元素本身的 css。

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

請注意，在上述大部分部分中，我都會檢查偵測到的裝置是否在行動裝置上，以避免不必要的無用計算。

之後，我在模板中建立漸變的 html，它充當內容的完整頁麵包裝器，並且僅在需要時應用相對的 css。

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

這是CSS。我在這裡為實現淺色和深色主題的網站提供了一個解決方案，我使用兩種顏色進行過渡，在外部部分我使用--primary-color 和--secondary-color 顏色，而內部部分是將兩個主題設定為--tertiary-color。但是，選擇和調整是你的。

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

最後，如前所述，這是唯一正在使用的用於檢測設備的實用程式。

// src/utils/device.ts

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

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

更好的想法？很想聽聽他們的聲音。

以上是如何在 Vue.js 中頁面背景上的滑鼠遊標周圍新增徑向漸變的詳細內容。更多資訊請關注PHP中文網其他相關文章！