需求:
有三个元素叠加显示在不用的图层,点击上移按钮,将选中的元素上移一个图层,点击两次上移,上移两个图层,点击下移按钮,将选中的元素下移一个图层。用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