vue-鼠标hover标题展开内容区域效果

Posted 2021-05-18 郝峰Vip

前言

---

之所以写这个是因为最近的项目需求中要实现一个pc端大型电商首屏选择商品分类效果，需求就是hover左侧区域展示右侧区域的内容，看到这个需求第一想法就是两者写在一个容器内，用定位把布局写好，后来仔细一想其实也可以不用这样，就自己写了一个。

其实这个功能就是两个不在同一父级的容器hover一个容器的内容展示相对应的另一个容器的内容。主要是使用index下标做的内容展示准确

项目框架是vue+ssr+nuxt

先看一下我完成的效果图

这个就是hover标题栏的标题是展示对应的内容，但是两者不在同一容器内。

话不多说，直接上代码

<template>
  <div class="revisionCategory">
    <div class="Category_boxshow">
      <!-- 左侧的一级分类菜单 -->
      <div class="category_left_first">
        <div
          class="left_first_lists"
          v-for="(item, index) in categoriesList"
          :key="index"
          :class="[index == is_show_index ? 'hoverBackground' : 'nohoverback']"
          @mouseenter.stop.prevent="getinOrderLis(index)"
        >
          <div
            class="red_center_line"
            :class="[
              index == is_show_index ? 'red_hover_line' : 'red_nohover_line',
            ]"
          ></div>
          <div class="class_icon">
            <img
              :src="item.icon"
              :alt="item.name"
              v-if="index != is_show_index"
            />
            <img
              :src="item.hoverIcon"
              :alt="item.name"
              v-if="index == is_show_index"
            />
          </div>
          <div
            class="class_name"
            :class="[index == is_show_index ? 'hoverColor' : 'no_hover_color']"
            v-text="item.name"
          ></div>
        </div>
      </div>
      <div class="category_right_second">
        <div
          class="class_every_list"
          v-for="(item, index) in categoriesList"
          :key="index"
          v-show="index == is_show_index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoriesList: [
        {
          name: '第一个',
        },
        {
          name: '第二个',
        },
      ],
      is_show_index: 0,
    }
  },
  mounted() {},
  computed: {},
  methods: {
    getinOrderLis(categoryIndex) {
      this.is_show_index = categoryIndex
    },
  },
}
</script>

<style lang="scss" scoped>
.revisionCategory {
  width: 100%;
  position: absolute;
  top: 36px;
  left: 0px;
  padding: 0px 30px;
  border-radius: 1px;
  background: #ffffff;
  z-index: 3000;
  .Category_boxshow {
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
    height: 100%;
    display: flex;
    .category_left_first {
      width: 245px;
      height: 100%;
      padding: 16px 0px;
      .hoverBackground {
        background: rgba(244, 80, 71, 0.06);
      }
      .nohoverback {
        background: #f9f9f9;
      }
      .left_first_lists {
        border: 1px solid red;
        height: 34px;
        display: flex;
        align-items: center;
        cursor: pointer;
        a {
          display: inline-block;
          display: flex;
          align-items: center;
        }
        .red_center_line {
          width: 2px;
          height: 16px;
          margin-right: 14px;
        }
        .class_icon {
          margin-right: 10px;
          font-size: 16px;
        }
        .red_hover_line {
          background: #f45047;
        }
        .red_nohover_line {
          background: #f9f9f9;
        }
        .hoverColor {
          color: #f45047;
        }
        .no_hover_color {
          color: #0a2435;
        }
        .class_name {
          font-size: 13px;
          font-weight: bold;
        }
      }
    }
    .category_right_second {
      flex: 1;
      height: 100%;
      display: flex;
      border: 1px solid green;
      padding: 0px 48px 16px 16px;
      .class_every_list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
</style>

结束语

写这个主要是为了方便布局，不想受限于只能布局在一个容器内的展示效果。