有多个元素叠加显示在不用的图层，选中某个元素后，点击上移、下移按钮可进行图层切换

需求：

有三个元素叠加显示在不用的图层，点击上移按钮，将选中的元素上移一个图层，点击两次上移，上移两个图层，点击下移按钮，将选中的元素下移一个图层。用vue3语法实现。

思路：

选中元素后点击上移或者下移，也就是将两个图层的z-index的值交换顺序。假设选中的元素z-index是3,点击下移，则值减一，z-index变为2，然后找出z-index值是个2的那个元素（注意这里要去除选中的那个元素），给这个元素的z-index加1，这两个图层就替换了。

实现：

<template>
  <div class="canvas_box">
    <div class="portrait_url">
      <!-- 图层1 -->
      <Vue3DraggableResizable @mousedown="activateComponent(0)" :style="{ zIndex: indexNum[0] }">
        <img
          style="width: 200px; height: 90px"
          src="https://s3.cn-northwest-1.amazonaws.com.cn/yinlulu-glint/upload/01f4d5d0-ef4f-460e-bc6f-35d67e720011.jpg"
        />
      </Vue3DraggableResizable>
      <!-- 图层2 -->
      <Vue3DraggableResizable @mousedown="activateComponent(1)" :style="{ zIndex: indexNum[1] }">
        <p>这是第二张插图</p>
      </Vue3DraggableResizable>
      <!-- 图层3 -->
      <Vue3DraggableResizable @mousedown="activateComponent(2)" :style="{ zIndex: indexNum[2] }">
        <p>这是标题</p>
      </Vue3DraggableResizable>
    </div>
  </div>
  <div style="width: 300px; margin-top: 20px; display: flex; justify-content: space-around">
    <button @click="moveUp">上移</button>
    <button @click="moveDown">下移</button>
    <button @click="upTop">置顶</button>
    <button @click="downBottom">置底</button>
  </div>
</template>
<script setup>
import {
    
     ref } from "vue";

let indexNum = ref([1, 2, 3]); //三个图层的层级值依次是1,2,3
const selectedLayer = ref(null); //选中元素的下标

// 选中的元素
function activateComponent(index) {
    
    
  selectedLayer.value = index;
}
// 上移
function moveUp() {
    
    
  if (indexNum.value[selectedLayer.value] >= 3) {
    
    
    //如果已经是最高层，则不执行上移
    return;
  }
  indexNum.value[selectedLayer.value]++;
  indexNum.value.forEach((i, index) => {
    
    
    if (selectedLayer.value == index) {
    
    
      // 如果是自己，则return
      return;
    }
    if (indexNum.value[selectedLayer.value] == i) {
    
    
      indexNum.value[index]--;
    }
  });
}
// 下移
function moveDown() {
    
    
  if (indexNum.value[selectedLayer.value] <= 1) {
    
    
    //如果已经是最底层，则不执行下移
    return;
  }
  indexNum.value[selectedLayer.value]--;
  indexNum.value.forEach((i, index) => {
    
    
    if (selectedLayer.value == index) {
    
    
      return;
    }
    if (indexNum.value[selectedLayer.value] == i) {
    
    
      indexNum.value[index]++;
    }
  });
}
// 置顶
function upTop() {
    
    
  if (indexNum.value[selectedLayer.value] >= 3) {
    
    
    //如果已经是最高层，则不执行置顶
    return;
  }
  indexNum.value[selectedLayer.value] = 3;
  indexNum.value.forEach((i, index) => {
    
    
    if (selectedLayer.value == index || indexNum.value[index] == 1) {
    
    
      return;
    }
    indexNum.value[index]--;
  });
}
// 置底
function downBottom() {
    
    
  if (indexNum.value[selectedLayer.value] <= 1) {
    
    
    //如果已经是最底层，则不执行置底
    return;
  }
  indexNum.value[selectedLayer.value] = 1;
  indexNum.value.forEach((i, index) => {
    
    
    if (selectedLayer.value == index || indexNum.value[index] == 3) {
    
    
      return;
    }
    indexNum.value[index]++;
  });
}
</script>
<style lang="scss" scoped>
// 操作的画布
.canvas_box {
    
    
  width: 300px;
  height: 533px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
  .portrait_url {
    
    
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    p {
    
    
      color: #000;
      font-size: 22px;
    }
  }
}
</style>

类似示意图：

注意：用到了Vue3DraggableResizable组件，它是一个用于vue3的可对元素进行拖拽和缩放的组件库，具体用法可参考我的另一篇博客：https://blog.csdn.net/qdm13209211861/article/details/129924960?spm=1001.2014.3001.5502