Update index.vue

This commit is contained in:
全栈小学生 2025-04-19 10:41:53 +08:00
parent 3fe60374bc
commit c5bd55ed63

View File

@ -1,11 +1,16 @@
<template> <template>
<view class="diy-group" id="componentList"> <view class="diy-group" id="componentList">
<top-tabbar v-if="data.global && Object.keys(data.global).length && data.global.topStatusBar && data.global.topStatusBar.isShow" :scrollBool="diyGroup.componentsScrollBool.TopTabbar" ref="topTabbarRef" :data="data.global" /> <top-tabbar v-if="data.global && Object.keys(data.global).length && data.global.topStatusBar && data.global.topStatusBar.isShow"
<view v-for="(component, index) in data.value" :key="component.id" @click="diyStore.changeCurrentIndex(index, component)" :class="diyGroup.getComponentClass(index,component)" :style="component.pageStyle"> :scrollBool="diyGroup.componentsScrollBool.TopTabbar" ref="topTabbarRef" :data="data.global" />
<view v-for="(component, index) in data.value" :key="component.id"
@click="diyStore.changeCurrentIndex(index, component)"
:class="diyGroup.getComponentClass(index,component)" :style="component.pageStyle">
<view class="relative" :style="{ marginTop : component.margin.top < 0 ? (component.margin.top * 2) + 'rpx' : '0' }"> <view class="relative" :style="{ marginTop : component.margin.top < 0 ? (component.margin.top * 2) + 'rpx' : '0' }">
<!-- 装修模式下设置负上边距后超出的内容禁止选中设置 --> <!-- 装修模式下设置负上边距后超出的内容禁止选中设置 -->
<view v-if="diyGroup.isShowPlaceHolder(index,component)" class="absolute w-full z-1" :style="{ height : (component.margin.top * 2 * -1) + 'rpx' }" @click.stop="diyGroup.placeholderEvent"></view> <view v-if="diyGroup.isShowPlaceHolder(index,component)" class="absolute w-full z-1"
:style="{ height : (component.margin.top * 2 * -1) + 'rpx' }"
@click.stop="diyGroup.placeholderEvent"></view>
<template v-if="component.componentName == 'GraphicNav'"> <template v-if="component.componentName == 'GraphicNav'">
<diy-graphic-nav :component="component" :global="data.global" :index="index" /> <diy-graphic-nav :component="component" :global="data.global" :index="index" />
@ -38,13 +43,13 @@
<diy-text :component="component" :global="data.global" :index="index" /> <diy-text :component="component" :global="data.global" :index="index" />
</template> </template>
<template v-if="component.componentName == 'RichText'"> <template v-if="component.componentName == 'RichText'">
<diy-rich-text :component="component" :global="data.global" :index="index"/> <diy-rich-text :component="component" :global="data.global" :index="index" />
</template> </template>
<template v-if="component.componentName == 'ActiveCube'"> <template v-if="component.componentName == 'ActiveCube'">
<diy-active-cube :component="component" :global="data.global" :index="index"/> <diy-active-cube :component="component" :global="data.global" :index="index" />
</template> </template>
<template v-if="component.componentName == 'FloatBtn'"> <template v-if="component.componentName == 'FloatBtn'">
<diy-float-btn :component="component" :global="data.global" :index="index"/> <diy-float-btn :component="component" :global="data.global" :index="index" />
</template> </template>
<template v-if="component.componentName == 'CarouselSearch'"> <template v-if="component.componentName == 'CarouselSearch'">
<diy-carousel-search :scrollBool="diyGroup.componentsScrollBool.CarouselSearch" :component="component" :global="data.global" :index="index" /> <diy-carousel-search :scrollBool="diyGroup.componentsScrollBool.CarouselSearch" :component="component" :global="data.global" :index="index" />
@ -112,7 +117,6 @@
<template v-if="component.componentName == 'FormFile'"> <template v-if="component.componentName == 'FormFile'">
<diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" /> <diy-form-file ref="diyFormFileRef" :component="component" :global="data.global" :index="index" />
</template> </template>
</view> </view>
</view> </view>
<template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBarSwitch"> <template v-if="diyStore.mode == '' && data.global && data.global.bottomTabBarSwitch">
@ -122,41 +126,41 @@
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import topTabbar from '@/components/top-tabbar/top-tabbar.vue' import topTabbar from '@/components/top-tabbar/top-tabbar.vue'
import { useDiyGroup } from './useDiyGroup' import { useDiyGroup } from './useDiyGroup'
import useDiyStore from '@/app/stores/diy'; import useDiyStore from '@/app/stores/diy';
import { ref,getCurrentInstance } from 'vue'; import { ref, getCurrentInstance } from 'vue';
const props = defineProps(['data']); const props = defineProps(['data']);
const instance: any = getCurrentInstance(); const instance: any = getCurrentInstance();
const getFormRef = () => { const getFormRef = () => {
return { return {
componentRefs: instance.refs componentRefs: instance.refs
}
} }
}
const diyStore = useDiyStore(); const diyStore = useDiyStore();
const diyGroup = useDiyGroup({ const diyGroup = useDiyGroup({
...props, ...props,
getFormRef getFormRef
}); });
const data = ref(diyGroup.data) const data = ref(diyGroup.data)
// //
diyGroup.onMounted() diyGroup.onMounted()
// //
diyGroup.onPageScroll() diyGroup.onPageScroll()
defineExpose({ defineExpose({
refresh: diyGroup.refresh, refresh: diyGroup.refresh,
getFormRef getFormRef
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './index.scss'; @import './index.scss';
</style> </style>