vue3案例2

效果图：

<template>
  <section>
    <aside>
      <ul class="nav-ul">
        <li
          class="nav-li"
          :class="nav.active && 'grey-li'"
          v-for="nav in navArr"
          :key="nav.id"
          @click="onNav(nav)"
        >
          {{ nav.name }}
        </li>
      </ul>
    </aside>
    <main>
      <template v-if="isImgActive == 1">
        <div class="header-1">
          <span
            :class="[h1.active && 'blue-p', 'default-p']"
            v-for="h1 in imgHeader1"
            :key="h1.id"
            @click="onH1(h1)"
            >{{ h1.name }}</span
          >
        </div>
        <div class="header-2">
          <span
            :class="[h2.active && 'blue-p1', 'default-p1']"
            v-for="h2 in imgHeader2"
            :key="h2.id"
            @click="onH2(h2)"
            >{{ h2.name }}</span
          >
        </div>
        <div>content{{ isImgActive1 }} {{ isImgActive2 }}</div>
      </template>
      <template v-if="isImgActive == 2">文件</template>
      <template v-if="isImgActive == 3">链接</template>
      <template v-if="isImgActive == 4">小程序</template>
      <template v-if="isImgActive == 5">视频</template>
    </main>
  </section>
</template>


<script setup>
import { reactive, ref } from "vue";
let isImgActive = ref(1);
let isImgActive1 = ref(1);
let isImgActive2 = ref(1);
let navArr = reactive([
  { id: 1, name: "图片", active: true },
  { id: 2, name: "文件" },
  { id: 3, name: "链接" },
  { id: 4, name: "小程序" },
  { id: 5, name: "视频" },
]);
let imgHeader1 = reactive([
  { id: 1, name: "海报", active: true },
  { id: 2, name: "素材" },
]);
let imgHeader2 = reactive([
  { id: 1, name: "全部", active: true },
  { id: 2, name: "分类1" },
  { id: 3, name: "素材2" },
  { id: 4, name: "素材3" },
  { id: 5, name: "素材4" },
]);

const onNav = (nav) => {
  isImgActive.value = nav.id;
  navArr.forEach((el) => {
    if (el.id == nav.id) {
      el.active = true;
    } else {
      el.active = false;
    }
  });
  // 图片区域
  if (isImgActive.value != 1) {
    imgHeader1.forEach((el) => {
      if (el.id == 1) {
        el.active = true;
      } else {
        el.active = false;
      }
    });
  }
  if (isImgActive.value != 1) {
    imgHeader2.forEach((el) => {
      if (el.id == 1) {
        el.active = true;
      } else {
        el.active = false;
      }
    });
  }
};

const onH1 = (h1) => {
  isImgActive1.value = h1.id;
  isImgActive2.value = 1;
  imgHeader1.forEach((el) => {
    if (el.id == h1.id) {
      el.active = true;
    } else if (el.id != h1.id) {
      el.active = false;
    }
  });
  if (isImgActive2.value == 1) {
    imgHeader2.forEach((el) => {
      if (isImgActive2.value == el.id) {
        el.active = true;
      } else {
        el.active = false;
      }
    });
  }
};

const onH2 = (h2) => {
  isImgActive2.value = h2.id;
  imgHeader2.forEach((el) => {
    if (el.id == h2.id) {
      el.active = true;
    } else if (el.id != h2.id) {
      el.active = false;
    }
  });
};
</script>

<style>
section {
  display: flex;
  justify-content: space-between;
  height: 100%;
}
aside {
  width: 100px;
  border: 1px solid #f00;
}
main {
  flex: 1;
  border: 1px solid #0f0;
}
.nav-ul {
  padding: 0;
  margin: 0;
}
.nav-ul > .nav-li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
}
.grey-li {
  background-color: #ddd;
  color: #fff;
}

.default-p {
  display: inline-block;
  padding: 5px 10px 5px 5px;
}
.blue-p {
  color: #4b69c6;
}

.default-p1 {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  text-align: center;
}
.blue-p1 {
  background-color: #4b69c6;
  color: #fff;
}
</style>