如何在 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中文网其他相关文章！