前言

在前端开发中，卡片遮罩层是一种常见的交互设计元素，用于强调某个区域或内容，并提供用户操作的入口。本文将带大家在 vue 中结合实际案例实现此功能。

---

实现效果

---

完整代码

html

<template>
  <!-- 主容器 -->
  <div class="box">
    <div
      class="card"
      @click="cardDetails(index)"
      @mousedown.prevent="startLongPress($event, index)"
      @mouseup="stopLongPress"
      @mouseleave="stopLongPress"
      v-for="(item, index) in list"
      :key="index"
      ref="cardRef"
    >
      <!-- 卡片内容 -->
      <div class="content">
        <div class="cardImg">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="introduce">{{ item.name }}</div>
      </div>
      <!-- 长按时显示的遮罩层 -->
      <div
        v-show="item.showOverlay"
        class="overlay"
        :class="{ 'expand-animation': item.showOverlay }"
        @click.stop
      >
        <div class="buttonCon">
          <div
            v-for="(shadeItem, shadeIndex) in shadeList"
            :key="shadeIndex"
            @click="onShade(shadeItem.title)"
          >
            {{ shadeItem.title }}
          </div>
        </div>
        <span class="close" @click="closeOverlay($event, index)">&times;</span>
      </div>
    </div>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      shadeList: [
        { title: "商品不感兴趣" },
        { title: "不想看到此类商品" },
        { title: "已经买了" },
        { title: "图片引起不适" },
        { title: "更多..." },
      ],
      longPressTimer: null, // 用于存储长按计时器
      list: [
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
        {
          imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "xxxxxxxxxxxxxxxxxxxxxxx",
          showOverlay: false,
        },
      ],
    };
  },
  mounted() {
    // 监听窗口滚动
    window.addEventListener("scroll", this.closeAllOverlaysOnScroll);
  },
  // 实例销毁前移除监听窗口的滚动
  beforeDestroy() {
    window.removeEventListener("scroll", this.closeAllOverlaysOnScroll);
  },
  methods: {
    // 滚动时关闭遮罩层
    closeAllOverlaysOnScroll() {
      this.list.forEach((item) => {
        this.$set(item, "showOverlay", false);
      });
    },
    // 开始长按事件
    startLongPress(event, index) {
      event.preventDefault();
      event.stopPropagation();
      this.closeOtherOverlays(index);
      this.longPressTimer = setTimeout(() => {
        this.list[index].showOverlay = true;
        document.addEventListener("click", this.checkClickOutside);
      }, 100);
    },
    closeOtherOverlays(index) {
      this.list.forEach((item, i) => {
        if (i !== index) {
          item.showOverlay = false;
        }
      });
    },
    // 点击卡片详情
    cardDetails(index) {
      if (!this.list[index].showOverlay) {
        console.log("点击卡片");
      }
    },
    // 结束长按事件
    stopLongPress() {
      clearTimeout(this.longPressTimer);
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 关闭遮罩层
    closeOverlay(event, index) {
      event.stopPropagation(); // 阻止事件冒泡
      this.$set(this.list[index], "showOverlay", false); // 关闭当前卡片的遮罩层
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 检查点击区域是否在遮罩层外
    checkClickOutside(event) {
      // 遍历所有卡片，关闭非点击卡片的遮罩层
      this.list.forEach((item, index) => {
        if (!this.$refs.cardRef[index].contains(event.target)) {
          this.$set(item, "showOverlay", false);
        }
      });
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 点击遮罩层内容
    onShade(name) {
      console.log(name);
    },
  },
};
</script>

css

<style scoped lang="less">
.box {
  font-size: 16px;
  min-height: 100vh;
  background: #f0f0f0;
  padding: 8px;
  .card {
    width: 49%;
    display: inline-block;
    background-color: white;
    position: relative;
    overflow-wrap: break-word;
    user-select: none;
    margin-bottom: 10px;
    border-radius: 8px;
    .introduce {
      text-align: justify;
      overflow: hidden;
      padding: 0px 6px 6px 6px;
      font-size: 14px;
      height: 50px;
      font-size: 14px;
    }
    .cardImg {
      img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        width: 100%;
        height: 120px;
      }
    }
    .overlay {
      padding: 16px 10px;
      box-sizing: border-box;
      border-radius: 8px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(35, 35, 35, 0.8);
      &.expand-animation {
        animation: expand 0.3s forwards;
      }
    }

    .buttonCon {
      font-size: 14px;
      width: 100%;
      color: rgb(213, 207, 207);
      div:not(:last-child) {
        border-bottom: 1px solid rgb(82, 82, 82);
        margin-bottom: 8px;
      }
      div {
        padding: 0px 2px 4px 2px;
      }
    }

    .close {
      position: absolute;
      top: 2px;
      right: 8px;
      font-size: 20px;
      cursor: pointer;
      color: white;
    }
  }
  .card:nth-child(even) {
    margin-left: 2%;
  }
}

@keyframes expand {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>

---

实现思路

这段代码实现了一个交互式的卡片列表功能，其中每个卡片包含一个图片和一些文字介绍。用户可以通过点击卡片来查看详情，同时也可以通过长按卡片来显示一个遮罩层，遮罩层上有一些操作按钮，如"商品不感兴趣"、"不想看到此类商品"等选项。此外，用户还可以点击遮罩层外的区域来关闭遮罩层。整体功能类似于一个商品展示页面，用户可以对商品进行不同的操作和反馈。

首先，实现卡片列表展示功能。通过循环遍历一个包含图片和文字介绍的数据数组，动态生成多个卡片组件。每个卡片组件包含一个图片元素和一个文字介绍元素，通过 vue 的 v-for 指令实现数据绑定，将对应的图片和文字展示在每个卡片上。

其次，实现点击卡片查看详情的功能。为每个卡片组件添加点击事件监听器，当用户点击某个卡片时，触发相应的事件处理函数，展示该卡片的详细信息。这可以通过 vue 的 @click 指令实现，为每个卡片元素添加点击事件处理逻辑。

接着，实现长按卡片显示遮罩层的功能。在代码中，为每个卡片组件添加长按事件监听器，当用户长按某个卡片时，显示遮罩层。通过 vue 的 @touchstart 指令监听长按事件，并在事件触发时显示遮罩层。遮罩层可以是一个覆盖在卡片上方的半透明层，用来提供操作按钮和用户反馈选项。

在遮罩层上添加操作按钮，如"商品不感兴趣"、"不想看到此类商品"等选项。用户可以通过点击这些按钮来进行不同的操作和反馈。通过在遮罩层组件中添加按钮元素，并为每个按钮添加点击事件处理逻辑来实现。

最后，实现点击遮罩层外的区域关闭遮罩层的功能。为遮罩层外的区域添加点击事件监听器，当用户点击遮罩层外的区域时，关闭遮罩层。通过 vue 的 @click 指令监听遮罩层外区域的点击事件，并在事件触发时关闭遮罩层。