為了給網(wǎng)站增添趣味，我決定在每次鼠標(biāo)沿著屏幕視圖移動(dòng)時(shí)，實(shí)現(xiàn)在光標(biāo)周圍閃爍的徑向漸變。以下實(shí)現(xiàn)適用于使用 TypeScript 構(gòu)建的 Vue.js 項(xiàng)目。

為了達(dá)到這個(gè)結(jié)果，為了簡(jiǎn)單起見(jiàn)，我還想使用一個(gè)用于設(shè)備檢測(cè)的庫(kù)，我選擇了 ua-parser-js，確切地說(shuō)是 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ù)，它只返回初始位置，即屏幕視圖的中心。它可以以不同的方式處理，例如隱藏，或者在第一次鼠標(biāo)觸發(fā)后可以通過(guò)動(dòng)畫出現(xiàn)在左上角位置。這是一個(gè)實(shí)施選擇。為了簡(jiǎn)單起見(jiàn)，我將其添加到視圖的中心。

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

然后，我創(chuàng)建一個(gè)對(duì)對(duì)象的反應(yīng)性引用，該對(duì)象將用于跟蹤通過(guò)鼠標(biāo)事件發(fā)生的光標(biāo)鼠標(biāo)移動(dòng)。

const cursorPositionRef = ref(getViewCentrePosition())

然后我實(shí)現(xiàn)了負(fù)責(zé)在每次光標(biāo)移動(dòng)后更新響應(yīng)式引用對(duì)象的函數(shù)。

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

該函數(shù)需要與鼠標(biāo)事件關(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è)到的設(shè)備是否在移動(dòng)設(shè)備上，以避免不必要的無(wú)用計(jì)算。

之后，我在模板中創(chuàng)建漸變的 html，它充當(dāng)內(nèi)容的完整頁(yè)面包裝器，并且僅在需要時(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)行過(guò)渡，在外部部分我使用 --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'
}

更好的想法？很想聽(tīng)到他們的聲音。

以上是如何在 Vue.js 中頁(yè)面背景上的鼠標(biāo)光標(biāo)周圍添加徑向漸變的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！