vue2鼠标移动到图片显示遮罩效果

在Vue.js 2中，为了实现鼠标移动到图片上时显示遮罩效果，通常会使用CSS和JavaScript结合起来。以下是一个简单的步骤：

1. 首先，在HTML中添加一个img标签，并为其设置一个`data-mask`属性作为标记，表示这个元素需要显示遮罩：

<img :src="imageUrl" @mouseenter="showMask" @mouseleave="hideMask" data-mask>

2. 定义组件的数据，包括默认的`maskVisible`状态（初始隐藏）和`maskElement`（用于动态创建遮罩元素）：

export default {
  data() {
    return {
      imageUrl: '',
      maskVisible: false,
      maskElement: null,
    };
  },
  //...
}

3. 编写`showMask`和`hideMask`方法来控制遮罩的显示和隐藏：

methods: {
  showMask(event) {
    this.maskElement = document.createElement('div');
    this.maskElement.className = 'image-mask'; // 设置遮罩样式
    event.target.appendChild(this.maskElement);
    this.maskVisible = true;
  },
  
  hideMask() {
    if (this.maskElement && this.maskVisible) {
      this.$nextTick(() => {
        this.maskElement.remove();
      });
      this.maskVisible = false;
    }
  },
},

4. 添加CSS样式来定义`.image-mask`的选择器，使其在鼠标悬停时显示并覆盖图片：

.image-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); // 可调整透明度和颜色
  display: none; /* 初始隐藏 */
}

/* 当图片被鼠标移入时应用此样式 */
[data-mask]:hover + .image-mask {
  display: block;
}