vue3 setup语法糖格式监控鼠标坐标改变背景颜色（个人记录用）

最新推荐文章于 2024-01-01 09:00:00 发布

(?????????

最新推荐文章于 2024-01-01 09:00:00 发布

阅读量222

点赞数

文章标签：前端 javascript css vue.js

本文链接：https://blog.csdn.net/qq_45736266/article/details/129880729

版权

本文记录了一种使用Vue3的setup语法糖，动态监控鼠标坐标并根据坐标改变页面背景颜色的方法。通过计算鼠标在浏览器窗口中的位置，并按比例映射到0-255的RGB值，实现背景色的实时变化。详细代码和解释包含在内。

摘要由CSDN通过智能技术生成

总代码在最后

演示效果：

代码讲解：

<template>
  <div >
    <div class="aboute" id="colorChange"     
    :style="{backgroundColor: colorB}">
        <p>w:{
  {movement.w}},h:{
  {movement.h}}</p>
        屏幕宽：{
  { widths }}
        屏幕高：{
  { heights }}
        宽比例：{
  { Wbili }}
        高比例：{
  { Hbili }}
    <p>当前颜色：{
  { colorB }}</p>
    </div>
  </div>
</template>

该代码片段为前端样式，注意style前的 “:”,动态改变背景颜色是关键。

<style scoped>
.aboute{
    height:calc(100vh);
}
</style>

该片段是css样式

然后关键的是以下的js片段：

<script setup>
import {ref,reactive,onMounted,computed} from 'vue'


const widths = ref(document.body.clientWidth);
const heights = ref(document.documentElement.clientHeight);
// const cc = document.getElementById("colorChange");
//实时监听鼠标的动态
function Mous