為了給網(wǎng)站增添趣味，我決定在每次滑鼠沿著螢?zāi)灰晥D移動(dòng)時(shí)，實(shí)現(xiàn)在遊標(biāo)周圍閃爍的徑向漸變。以下實(shí)作適用於使用 TypeScript 建置的 Vue.js 專案。

為了達(dá)到這個(gè)結(jié)果，為了簡(jiǎn)單起見，我還想使用一個(gè)用於設(shè)備檢測(cè)的庫(kù)，我選擇了 ua-parser-js，確切地說是 2.0.0 版本。

第二個(gè)珊瑚步驟是創(chuàng)建漸變組件，它必須是所有視圖的主要容器，因?yàn)樗鼘⑹菨u變發(fā)光的區(qū)域。

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

讓我們理解程式碼。在腳本部分，我有一個(gè)函數(shù)，它只返回初始位置，即螢?zāi)灰晥D的中心。它可以以不同的方式處理，例如隱藏，或者在第一次滑鼠觸發(fā)後可以透過動(dòng)畫出現(xiàn)在左上角位置。這是一個(gè)實(shí)施選擇。為了簡(jiǎn)單起見，我將其添加到視圖的中心。

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

然後，我建立一個(gè)對(duì)物件的反應(yīng)性引用，該物件將用於追蹤透過滑鼠事件發(fā)生的遊標(biāo)滑鼠移動(dòng)。

const cursorPositionRef = ref(getViewCentrePosition())

然後我實(shí)作了負(fù)責(zé)在每次遊標(biāo)移動(dòng)後更新響應(yīng)式參考物件的函數(shù)。

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

函數(shù)需要與滑鼠事件關(guān)聯(lián)。

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

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

最後，我計(jì)算漸變位置的反應(yīng)值，該值將提供給元素本身的 css。

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

請(qǐng)注意，在上述大部分部分中，我都會(huì)檢查偵測(cè)到的裝置是否在行動(dòng)裝置上，以避免不必要的無用計(jì)算。

之後，我在模板中建立漸變的 html，它充當(dāng)內(nèi)容的完整頁麵包裝器，並且僅在需要時(shí)應(yīng)用相對(duì)的 css。

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

這是CSS。我在這裡為實(shí)現(xiàn)淺色和深色主題的網(wǎng)站提供了一個(gè)解決方案，我使用兩種顏色進(jìn)行過渡，在外部部分我使用--primary-color 和--secondary-color 顏色，而內(nèi)部部分是將兩個(gè)主題設(shè)定為--tertiary-color。但是，選擇和調(diào)整是你的。

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

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

// 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 中頁面背景上的滑鼠遊標(biāo)周圍新增徑向漸變的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！