vue實現(xiàn)卡片遮罩層交互式功能

更新時間：2024年08月22日 16:18:40 作者：水星記_

在前端開發(fā)中,卡片遮罩層是一種常見的交互設(shè)計元素,用于強調(diào)某個區(qū)域或內(nèi)容,并提供用戶操作的入口,本文將帶大家在?vue?中結(jié)合實際案例實現(xiàn)此功能,感興趣的朋友一起看看吧

前言

在前端開發(fā)中，卡片遮罩層是一種常見的交互設(shè)計元素，用于強調(diào)某個區(qū)域或內(nèi)容，并提供用戶操作的入口。本文將帶大家在 vue 中結(jié)合實際案例實現(xiàn)此功能。

實現(xiàn)效果

完整代碼

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"
    >
      <!-- 卡片內(nèi)容 -->
      <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: "已經(jīng)買了" },
        { 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() {
    // 監(jiān)聽窗口滾動
    window.addEventListener("scroll", this.closeAllOverlaysOnScroll);
  },
  // 實例銷毀前移除監(jiān)聽窗口的滾動
  beforeDestroy() {
    window.removeEventListener("scroll", this.closeAllOverlaysOnScroll);
  },
  methods: {
    // 滾動時關(guān)閉遮罩層
    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("點擊卡片");
      }
    },
    // 結(jié)束長按事件
    stopLongPress() {
      clearTimeout(this.longPressTimer);
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 關(guān)閉遮罩層
    closeOverlay(event, index) {
      event.stopPropagation(); // 阻止事件冒泡
      this.$set(this.list[index], "showOverlay", false); // 關(guān)閉當前卡片的遮罩層
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 檢查點擊區(qū)域是否在遮罩層外
    checkClickOutside(event) {
      // 遍歷所有卡片，關(guān)閉非點擊卡片的遮罩層
      this.list.forEach((item, index) => {
        if (!this.$refs.cardRef[index].contains(event.target)) {
          this.$set(item, "showOverlay", false);
        }
      });
      document.removeEventListener("click", this.checkClickOutside);
    },
    // 點擊遮罩層內(nèi)容
    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>

實現(xiàn)思路

這段代碼實現(xiàn)了一個交互式的卡片列表功能，其中每個卡片包含一個圖片和一些文字介紹。用戶可以通過點擊卡片來查看詳情，同時也可以通過長按卡片來顯示一個遮罩層，遮罩層上有一些操作按鈕，如"商品不感興趣"、"不想看到此類商品"等選項。此外，用戶還可以點擊遮罩層外的區(qū)域來關(guān)閉遮罩層。整體功能類似于一個商品展示頁面，用戶可以對商品進行不同的操作和反饋。

首先，實現(xiàn)卡片列表展示功能。通過循環(huán)遍歷一個包含圖片和文字介紹的數(shù)據(jù)數(shù)組，動態(tài)生成多個卡片組件。每個卡片組件包含一個圖片元素和一個文字介紹元素，通過 vue 的 v-for 指令實現(xiàn)數(shù)據(jù)綁定，將對應(yīng)的圖片和文字展示在每個卡片上。

其次，實現(xiàn)點擊卡片查看詳情的功能。為每個卡片組件添加點擊事件監(jiān)聽器，當用戶點擊某個卡片時，觸發(fā)相應(yīng)的事件處理函數(shù)，展示該卡片的詳細信息。這可以通過 vue 的 @click 指令實現(xiàn)，為每個卡片元素添加點擊事件處理邏輯。

接著，實現(xiàn)長按卡片顯示遮罩層的功能。在代碼中，為每個卡片組件添加長按事件監(jiān)聽器，當用戶長按某個卡片時，顯示遮罩層。通過 vue 的 @touchstart 指令監(jiān)聽長按事件，并在事件觸發(fā)時顯示遮罩層。遮罩層可以是一個覆蓋在卡片上方的半透明層，用來提供操作按鈕和用戶反饋選項。

在遮罩層上添加操作按鈕，如"商品不感興趣"、"不想看到此類商品"等選項。用戶可以通過點擊這些按鈕來進行不同的操作和反饋。通過在遮罩層組件中添加按鈕元素，并為每個按鈕添加點擊事件處理邏輯來實現(xiàn)。

最后，實現(xiàn)點擊遮罩層外的區(qū)域關(guān)閉遮罩層的功能。為遮罩層外的區(qū)域添加點擊事件監(jiān)聽器，當用戶點擊遮罩層外的區(qū)域時，關(guān)閉遮罩層。通過 vue 的 @click 指令監(jiān)聽遮罩層外區(qū)域的點擊事件，并在事件觸發(fā)時關(guān)閉遮罩層。

到此這篇關(guān)于vue實現(xiàn)卡片遮罩層交互式功能的文章就介紹到這了,更多相關(guān)vue遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: