fix:新增图层处理

This commit is contained in:
MTrun 2022-01-28 21:17:49 +08:00
parent 929bc4da9f
commit a2a3a31df5
3 changed files with 29 additions and 1 deletions

View File

@ -0,0 +1,3 @@
import ListItem from './index.vue'
export { ListItem }

View File

@ -0,0 +1,17 @@
<template>
<div class="go-content-layers-list-item">
<n-space>
<div>图片</div>
<b-text>
文字
</b-text>
</n-space>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@include go(content-layers-list-items) {
}
</style>

View File

@ -11,7 +11,9 @@
<component :is="LayersIcon" /> <component :is="LayersIcon" />
</n-icon> </n-icon>
</template> </template>
<!-- 图层内容 --> <!-- 图层内容 -->
<ListItem v-for="item in chartEditStore.getComponentList" :key="item.id"/>
</ContentBox> </ContentBox>
</template> </template>
@ -19,19 +21,25 @@
import { ContentBox } from '../ContentBox/index' import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { ListItem } from './components/ListItem/index'
import { icon } from '@/plugins' import { icon } from '@/plugins'
const { LayersIcon } = icon.ionicons5 const { LayersIcon } = icon.ionicons5
const chartLayoutStore = useChartLayoutStore() const chartLayoutStore = useChartLayoutStore()
const chartEditStore = useChartEditStoreStore()
const backHandle = () => { const backHandle = () => {
chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false) chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$wight: 200px; $wight: 150px;
@include go(content-layers) { @include go(content-layers) {
width: $wight; width: $wight;
flex-shrink: 0;
overflow: hidden; overflow: hidden;
@extend .go-transition; @extend .go-transition;
&.scoped { &.scoped {