sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改页面显示逻辑

v1.0.0
于肖磊 2024-08-30 17:23:42 +08:00
parent 3d19865c68
commit 0e130b98a7
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/layout/components/main/index.scss
View File

@ -255,7 +255,10 @@
width: 12.8rem;
height: 100%;
background: #fff;
transition: left 0.3s ease;
transition: left 0.5s ease;
}
.drawer-drag-bg {
background: #F2F8FF;
}
.drawer-drag-area {
height: calc(100% - 6rem);

32
src/layout/components/main/index.vue
View File

@ -17,11 +17,11 @@
</div>
<div class="drawer-container">
<div class="drawer-content" :style="{ left: diy_data.length > 0 ? '0' : '-100%' }">
<div class="size-14 cr-3 fw ptb-20 pl-12">已选组件</div>
<div class="drawer-drag-area">
<div class="size-14 cr-3 fw ptb-20 pl-12">已选组件({{ diy_data.length }})</div>
<div ref="left_scrollTop" class="drawer-drag-area">
<VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" :on-sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
<li v-for="(item, index) in diy_data" :key="index" class="flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag" :style="[item.show_tabs ? 'background: #F2F8FF;' : '']" @click="on_choose(index, item.show_tabs)">
<li v-for="(item, index) in diy_data" :key="index" :class="['flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-drag-bg': item.show_tabs }]" @click="on_choose(index, item.show_tabs)">
<el-icon class="iconfont icon-drag size-16 cr-d" />
<span class="size-12 cr-6">{{ item.name }}</span>
<el-icon class="iconfont icon-close-b size-16 abs" :style="[ item.show_tabs ? '' : 'display:none']" @click.stop="del(index)" />
@ -186,6 +186,14 @@ const props = defineProps({
const diy_data = ref(props.diyData);
const page_data = ref(props.header);
const footer_nav = ref(props.footer);
const drawer_visiable = ref(false);
watch(diy_data, (val) => {
if (val.length > 0) {
drawer_visiable.value = true;
} else {
drawer_visiable.value = false;
}
})
// 监听
watch(
() => props.diyData,
@ -513,12 +521,16 @@ const set_show_tabs = (index: number) => {
}
});
};
// 中间区域的滚动效果
const scrollTop = ref<HTMLElement | null>(null);
const activeCard = ref<HTMLElement | null>(null);
// 左边已选组件的滚动效果
const left_scrollTop = ref<HTMLElement | null>(null);
const left_activeCard = ref<HTMLElement | null>(null);
// 滚动到指定位置
const scroll = () => {
nextTick(() => {
// 获取当前选中的内容
// 获取当前选中的内容 --中间区域的滚动效果
activeCard.value = document.querySelector('.plug-in-table.plug-in-border');
if (activeCard.value) {
// 获取选中内容的位置
@ -528,6 +540,16 @@ const scroll = () => {
scrollTop.value.scrollTo({ top: scrollY - 200, behavior: 'smooth' });
}
}
// 左边已选组件的滚动效果
left_activeCard.value = document.querySelector('.drawer-drag-bg');
if (left_activeCard.value) {
// 获取选中内容的位置
const left_scrollY = left_activeCard.value.offsetTop;
if (left_scrollTop.value) {
// 选中的滚动到指定位置
left_scrollTop.value.scrollTo({ top: left_scrollY - 200, behavior: 'smooth' });
}
}
});
};
//#endregion
@ -604,4 +626,4 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
overflow: hidden;
}
}
</style>
</style>