mirror of
https://gitee.com/niucloud-team/niucloud.git
synced 2025-12-14 02:22:48 +00:00
Update index.vue
This commit is contained in:
parent
3fe60374bc
commit
c5bd55ed63
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user