修改自定义层级逻辑处理
于肖磊
parent
8b940f8582
commit
4eef5508ea
|
|
@ -1,9 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4227145 */
|
||||
src: url('iconfont.woff2?t=1728892263234') format('woff2'),
|
||||
url('iconfont.woff?t=1728892263234') format('woff'),
|
||||
url('iconfont.ttf?t=1728892263234') format('truetype'),
|
||||
url('iconfont.svg?t=1728892263234#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1728898698610') format('woff2'),
|
||||
url('iconfont.woff?t=1728898698610') format('woff'),
|
||||
url('iconfont.ttf?t=1728898698610') format('truetype'),
|
||||
url('iconfont.svg?t=1728898698610#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cancel-bottom-placement:before {
|
||||
content: "\e79f";
|
||||
.icon-top-up:before {
|
||||
content: "\e7a1";
|
||||
}
|
||||
|
||||
.icon-bottom-up:before {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,11 +6,11 @@
|
|||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "42097664",
|
||||
"name": "取消置底",
|
||||
"font_class": "cancel-bottom-placement",
|
||||
"unicode": "e79f",
|
||||
"unicode_decimal": 59295
|
||||
"icon_id": "42105733",
|
||||
"name": "置顶",
|
||||
"font_class": "top-up",
|
||||
"unicode": "e7a1",
|
||||
"unicode_decimal": 59297
|
||||
},
|
||||
{
|
||||
"icon_id": "42097665",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="cancel-bottom-placement" unicode="" d="M911.872 831.715556A90.396444 90.396444 0 0 1 876.088889 839.111111H147.911111A91.306667 91.306667 0 0 1 56.888889 748.088889v-728.177778A91.363556 91.363556 0 0 1 147.911111-71.111111h216.177778a34.133333 34.133333 0 1 1 0 68.266667H170.666667a45.511111 45.511111 0 0 0-45.511111 45.511111V725.333333a45.511111 45.511111 0 0 0 45.511111 45.511111h682.666666a45.511111 45.511111 0 0 0 45.511111-45.511111v-193.422222a34.133333 34.133333 0 0 1 68.266667 0V748.088889a91.363556 91.363556 0 0 1-55.239111 83.626667zM957.155556-12.913778a34.133333 34.133333 0 0 0-48.241778-48.241778l-152.860445 152.860445-153.031111-152.860445a34.247111 34.247111 0 0 0-48.298666 0 34.247111 34.247111 0 0 0 0 48.241778l152.974222 152.860445-152.803556 153.031111a34.304 34.304 0 0 0 0 48.298666 34.304 34.304 0 0 0 48.241778 0l152.917333-152.974222 152.860445 152.860445a34.133333 34.133333 0 0 0 48.241778-48.184889l-152.860445-152.860445 152.860445-153.031111z" horiz-adv-x="1024" />
|
||||
<glyph glyph-name="top-up" unicode="" d="M932.465778 655.075556A34.872889 34.872889 0 0 1 967.111111 690.176 34.872889 34.872889 0 0 1 932.465778 725.333333H91.591111A34.872889 34.872889 0 0 1 56.888889 690.176c0-19.342222 15.473778-35.100444 34.645333-35.100444H932.408889zM116.053333 110.364444l403.512889 430.307556 388.437334-414.208c11.776-12.572444 30.549333-14.222222 44.145777-4.778667l4.266667 3.584a35.043556 35.043556 0 0 1 1.194667 49.152L544.426667 615.082667a34.019556 34.019556 0 0 1-49.777778 0.113777l-428.316445-456.874666a35.157333 35.157333 0 0 1 1.137778-49.152 33.962667 33.962667 0 0 1 48.526222 1.137778z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="bottom-up" unicode="" d="M932.465778 169.813333c19.171556 0 34.645333-15.701333 34.645333-35.100444a34.872889 34.872889 0 0 0-34.645333-35.157333H91.591111A34.872889 34.872889 0 0 0 56.888889 134.712889c0 19.342222 15.473778 35.100444 34.645333 35.100444H932.408889zM116.053333 714.524444l403.512889-430.307555 388.437334 414.208a33.848889 33.848889 0 0 0 44.145777 4.778667l4.266667-3.584c13.767111-13.255111 14.279111-35.328 1.194667-49.152L544.426667 209.806222a34.019556 34.019556 0 0 0-49.777778-0.113778L66.332444 666.567111a35.157333 35.157333 0 0 0 1.137778 49.152 33.962667 33.962667 0 0 0 48.526222-1.137778z" horiz-adv-x="1024" />
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 176 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -134,30 +134,6 @@
|
|||
box-shadow: 0rem 0 0rem 0.1rem $cr-main;
|
||||
border: 0;
|
||||
}
|
||||
.plug-in-right {
|
||||
cursor: default;
|
||||
background: $cr-main;
|
||||
// position: absolute;
|
||||
// right: -5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding: 2rem 1.2rem;
|
||||
color: #fff;
|
||||
border-radius: 0.4rem;
|
||||
z-index: 2;
|
||||
& > i {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > i.disabled {
|
||||
color: #5db2ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
& .icon-arrow-top,
|
||||
& .icon-arrow-bottom {
|
||||
height: 0.9rem;
|
||||
}
|
||||
}
|
||||
.area-box {
|
||||
position: absolute;
|
||||
background: rgba(42, 148, 255, 0.25);
|
||||
|
|
@ -295,17 +271,6 @@
|
|||
cursor: pointer;
|
||||
color: $cr-main;
|
||||
}
|
||||
.acticons {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: 23rem;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.drawer-container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -59,22 +59,7 @@
|
|||
<!-- 视图渲染 -->
|
||||
<div class="main">
|
||||
<div class="model-content">
|
||||
<div v-if="typeof select_index === 'number' && !isNaN(select_index)" class="acticons">
|
||||
<div class="plug-in-right" chosenClass="close">
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="删除组件" placement="top">
|
||||
<el-icon class="iconfont icon-del" @click.stop="del(select_index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="复制组件" placement="top">
|
||||
<el-icon class="iconfont icon-copy" @click.stop="copy(select_index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置底" placement="top">
|
||||
<el-icon class="iconfont icon-bottom-up" @click.stop="bottom_up(select_index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="取消置底" placement="top">
|
||||
<el-icon class="iconfont icon-cancel-bottom-placement" @click.stop="cancel_bottom_up(select_index)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index)" v-model="select_index" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
|
||||
<!-- 拖拽区 -->
|
||||
<div class="model-drag">
|
||||
<div class="model-wall">
|
||||
|
|
@ -296,24 +281,64 @@ const del = (index: null | number) => {
|
|||
});
|
||||
}
|
||||
};
|
||||
const bottom_up = (index: number) => {
|
||||
console.log('bottom_up', index);
|
||||
if (typeof index === 'number' && !isNaN(index)) {
|
||||
if (!isEmpty(diy_data.value[index])) {
|
||||
const new_z_index = z_index.value - 1;
|
||||
diy_data.value[index].com_data.z_index = new_z_index;
|
||||
z_index.value = new_z_index;
|
||||
//前置一层 + 1
|
||||
const previous_layer = (index: number) => {
|
||||
if (diy_data.value.length > 0) {
|
||||
const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
|
||||
// 数据排序
|
||||
const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
|
||||
// 找到当前元素的索引
|
||||
const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
|
||||
if (regular_index + 1 <= diy_data.value.length - 1) {
|
||||
// 取出上一个的值
|
||||
const new_z_index = list[regular_index + 1].com_data.z_index;
|
||||
// 替换原始数组中的值
|
||||
const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
|
||||
const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
|
||||
// 数据互换
|
||||
diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
|
||||
diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const cancel_bottom_up = (index: number) => {
|
||||
if (typeof index === 'number' && !isNaN(index)) {
|
||||
if (!isEmpty(diy_data.value[index])) {
|
||||
diy_data.value[index].com_data.z_index = 0;
|
||||
//后置一层 - 1
|
||||
const underlying_layer = (index: number) => {
|
||||
if (diy_data.value.length > 0) {
|
||||
const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
|
||||
// 数据排序
|
||||
const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
|
||||
// 找到当前元素的索引
|
||||
const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
|
||||
if (regular_index - 1 >= 0) {
|
||||
// 取出上一个的值
|
||||
const new_z_index = list[regular_index - 1].com_data.z_index;
|
||||
// 替换原始数组中的值
|
||||
const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
|
||||
const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
|
||||
// 数据互换
|
||||
diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
|
||||
diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
//组件置顶
|
||||
const top_up = (index: number) => {
|
||||
if (!isEmpty(diy_data.value[index])) {
|
||||
const new_z_index = top_z_index.value + 1;
|
||||
diy_data.value[index].com_data.z_index = new_z_index;
|
||||
top_z_index.value = new_z_index;
|
||||
}
|
||||
}
|
||||
|
||||
//组件置底
|
||||
const bottom_up = (index: number) => {
|
||||
if (!isEmpty(diy_data.value[index])) {
|
||||
const new_z_index = z_index.value - 1;
|
||||
diy_data.value[index].com_data.z_index = new_z_index;
|
||||
z_index.value = new_z_index;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前传递过来的index对应的diy_data中的数据
|
||||
const get_diy_index_data = (index: number) => {
|
||||
|
|
@ -373,14 +398,17 @@ const center_height = defineModel('height', { type: Number, default: 0 });
|
|||
const drag_area_height = computed(() => center_height.value + 'px');
|
||||
const draggable_container = ref(true);
|
||||
let data = reactive<diy_content[]>([]);
|
||||
// 最低的层级
|
||||
const z_index = ref(0);
|
||||
// 最高的层级
|
||||
const top_z_index = ref(0);
|
||||
watch(() => center_height.value, () => {
|
||||
data = diy_data.value;
|
||||
// 从 DOM 中删除组件
|
||||
draggable_container.value = false;
|
||||
nextTick(() => {
|
||||
// 在 DOM 中添加组件
|
||||
diy_data.value = data.map((item) => ({
|
||||
diy_data.value = data.map((item, index) => ({
|
||||
...item,
|
||||
show_tabs: '0',
|
||||
location: {
|
||||
|
|
@ -392,12 +420,26 @@ watch(() => center_height.value, () => {
|
|||
},
|
||||
com_data: {
|
||||
...item.com_data,
|
||||
z_index: typeof item.com_data.z_index === 'number' && !isNaN(item.com_data.z_index) ? item.com_data.z_index : 0,
|
||||
com_height: item.com_data.staging_height,
|
||||
},
|
||||
}));
|
||||
if (diy_data.value.length > 0) {
|
||||
const list = diy_data.value.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
|
||||
z_index.value = list[list.length - 1].com_data.z_index || 0;
|
||||
// 将z-index重置为初始效果
|
||||
let list_z_index = -1;
|
||||
// 设置默认值
|
||||
list.forEach((item) => {
|
||||
if (item.com_data.z_index == 0) {
|
||||
const new_z_index = list_z_index + 1;
|
||||
item.com_data.z_index = new_z_index;
|
||||
list_z_index = new_z_index;
|
||||
}
|
||||
});
|
||||
// 获取更新后的数据
|
||||
const new_list = list.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
|
||||
z_index.value = new_list[0].com_data.z_index || 0;
|
||||
top_z_index.value = new_list[new_list.length - 1].com_data.z_index || 0;
|
||||
}
|
||||
// 容器高度变化时，组件不绑定右侧数据
|
||||
emits('rightUpdate', {});
|
||||
|
|
@ -408,6 +450,7 @@ watch(() => center_height.value, () => {
|
|||
//#region 左侧拖拽过来的处理
|
||||
let draggedItem = ref<any>({});
|
||||
const dragStart = (item: any, event: any) => {
|
||||
const new_z_index = top_z_index.value + 1;
|
||||
// 初始化拖拽的数据
|
||||
draggedItem.value = {
|
||||
name: item.name,
|
||||
|
|
@ -418,8 +461,12 @@ const dragStart = (item: any, event: any) => {
|
|||
id: get_math(),
|
||||
key: item.key,
|
||||
is_hot: '0',
|
||||
com_data: cloneDeep(item.com_data),
|
||||
com_data: {
|
||||
...cloneDeep(item.com_data),
|
||||
z_index: new_z_index,
|
||||
},
|
||||
};
|
||||
top_z_index.value = new_z_index;
|
||||
// 拖拽的时候清空热区
|
||||
hot_list.data = [];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div v-if="typeof index === 'number' && !isNaN(index)" class="acticons">
|
||||
<div class="plug-in-right" chosenClass="close">
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="删除组件" placement="right">
|
||||
<el-icon class="iconfont icon-del" @click.stop="del(index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="复制组件" placement="right">
|
||||
<el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="前置一层" placement="right">
|
||||
<el-icon class="iconfont icon-arrow-top" @click.stop="previous_layer(index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="后置一层" placement="right">
|
||||
<el-icon class="iconfont icon-arrow-bottom" @click.stop="underlying_layer(index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置顶" placement="right">
|
||||
<el-icon class="iconfont icon-top-up" @click.stop="top_up(index)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置底" placement="right">
|
||||
<el-icon class="iconfont icon-bottom-up" @click.stop="bottom_up(index)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const index = defineModel({ type: Number , default: null });
|
||||
const emits = defineEmits(['del', 'copy', 'previous_layer', 'underlying_layer', 'top_up', 'bottom_up']);
|
||||
// 删除
|
||||
const del = (index: number) => {
|
||||
emits('del', index)
|
||||
}
|
||||
//复制组件
|
||||
const copy = (index: number) => {
|
||||
emits('copy', index)
|
||||
}
|
||||
//前置一层
|
||||
const previous_layer = (index: number) => {
|
||||
emits('previous_layer', index)
|
||||
}
|
||||
//后置一层
|
||||
const underlying_layer = (index: number) => {
|
||||
emits('underlying_layer', index)
|
||||
}
|
||||
//组件置顶
|
||||
const top_up = (index: number) => {
|
||||
emits('top_up', index)
|
||||
}
|
||||
//组件置底
|
||||
const bottom_up = (index: number) => {
|
||||
emits('bottom_up', index)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.acticons {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: 23rem;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.plug-in-right {
|
||||
cursor: default;
|
||||
background: $cr-main;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding: 2rem 1.2rem;
|
||||
color: #fff;
|
||||
border-radius: 0.4rem;
|
||||
z-index: 2;
|
||||
& > i {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > i.disabled {
|
||||
color: #5db2ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
& .icon-arrow-top,
|
||||
& .icon-arrow-bottom {
|
||||
height: 0.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -159,7 +159,9 @@ const accomplish = () => {
|
|||
if (!draglist.value) {
|
||||
return;
|
||||
} else {
|
||||
// 规整数据逻辑
|
||||
const list = draglist.value.diy_data.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
|
||||
// 将z-index重置为初始效果
|
||||
let z_index = 0;
|
||||
if (list.length > 0) {
|
||||
list.forEach((item) => {
|
||||
|
|
@ -170,7 +172,6 @@ const accomplish = () => {
|
|||
}
|
||||
});
|
||||
}
|
||||
console.log(draglist.value.diy_data);
|
||||
form.custom_list = draglist.value.diy_data;
|
||||
}
|
||||
form.height = center_height.value;
|
||||
|
|
|
|||
Loading…
Reference in New Issue