vue实现鼠标悬浮遮层

在Vue.js中实现鼠标悬停显示遮罩层的效果，通常通过CSS和JavaScript配合来完成。以下是一个简单的步骤：

1. **HTML结构**:
创建一个包含内容的元素（比如`<div>`），并为其添加一个兄弟元素作为遮罩层 (`<div class="overlay">`)。

   <template>
     <div class="container">
       <div class="content">你的主要内容</div>
       <div class="overlay" v-if="isHovered"></div>
     </div>
   </template>

2. **CSS样式**:
遮罩层需要设置透明度、宽高和定位属性，使其只在鼠标悬停时可见。例如:

   .overlay {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5); /* 设置半透明黑色 */
     transition: opacity 0.3s ease; /* 添加过渡效果 */
   }
   .container:hover .overlay { /* 当鼠标悬浮到.container上时 */
     display: block;
   }

3. **Vue绑定状态**:
在Vue组件内，创建一个布尔变量 `isHovered` 来控制遮罩层的显示隐藏，并监听鼠标事件来切换这个值。

   <script>
   export default {
     data() {
       return {
         isHovered: false,
       };
     },
     methods: {
       handleMouseEnter() {
         this.isHovered = true;
       },
       handleMouseLeave() {
         this.isHovered = false;
       },
     },
     mounted() {
       // 如果你想在页面加载时也显示遮罩层，可以去掉下面这行
       // 监听鼠标进入事件
       document.addEventListener('mouseenter', this.handleMouseEnter);
       // 监听鼠标离开事件
       document.addEventListener('mouseleave', this.handleMouseLeave);
     },
     beforeDestroy() {
       // 移除事件监听，防止内存泄漏
       document.removeEventListener('mouseenter', this.handleMouseEnter);
       document.removeEventListener('mouseleave', this.handleMouseLeave);
     },
   };
   </script>

现在，当鼠标悬停在`.container`上时，`.overlay`就会显示出来，鼠标移开则会消失。如果你不需要在整个文档范围内生效，可以在`.container`上直接绑定事件处理函数。