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

最新推荐文章于 2023-12-16 15:57:13 发布

(?????????

最新推荐文章于 2023-12-16 15:57:13 发布

阅读量169

点赞数

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

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

版权

总代码在最后

演示效果：

代码讲解：

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