vue实现图片蒙层效果（带收藏、分享功能）

实现如下效果：当鼠标经过 会出现蒙层 并且有对应需求

思路：蒙层采用定位 鼠标经过给蒙层元素display设置为'block' 鼠标移开display设置为'none' ,具体看代码
这是渲染的图片和蒙层

        <div
          class="main-img"
          @mouseenter="handleImgMouseenter(i)"
          @mouseleave="handleImgMouseleave(i)"
        >
          <img src="../../common/assets/image/viewSwitch/viewSwitch-test.png" />
          <div class="img-mask">
            <div class="mask-collection">
              <i
                class="el-icon-star-off"
                v-if="!item.isCollected"
                @click="handleCollect(i)"
              ></i>
              <i
                class="el-icon-star-on"
                v-if="item.isCollected"
                @click="handleCancelCollect(i)"
              ></i>
            </div>
            <div class="mask-share">
              <img
                src="../../common/assets/image/viewSwitch/viewSwitch-share.png"
                @click="handleShare(i)"
              />
            </div>
            <div class="mask-views">
              <i class="el-icon-view"></i>{{ item.viewCount }}
            </div>
          </div>
        </div>
View Code

然后就是鼠标移入移出事件

 

 

 

 

1     handleImgMouseenter(i) {
2       let imgMaskHtml = document.getElementsByClassName("img-mask")[i];
3       imgMaskHtml.style.display = "block";
4     },
5     handleImgMouseleave(i) {
6       let imgMaskHtml = document.getElementsByClassName("img-mask")[i];
7       imgMaskHtml.style.display = "none";
8     },
View Code

然后就是采用定位

 

posted @ 2023-02-15 17:05  沁霓  阅读(1069)  评论(0)    收藏  举报