github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-25 00:33:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 调整预览状态下控制状态样式

Browse Source
This commit is contained in:
tnt group 2022-09-29 11:35:35 +08:00
parent 1aade9c4b8
commit fd8aeba700
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/preview/components/PreviewRenderGroup/index.vue
View File

@ -7,9 +7,9 @@
:style="{ :style="{
...getComponentAttrStyle(item.attr, groupIndex), ...getComponentAttrStyle(item.attr, groupIndex),
...getFilterStyle(item.styles), ...getFilterStyle(item.styles),
...getTransformStyle(item.styles) ...getTransformStyle(item.styles),
...getStatusStyle(item.status)
}" }"
v-show="!item.status.hide"
> >
<component <component
:is="item.chartConfig.chartKey" :is="item.chartConfig.chartKey"
@ -25,7 +25,7 @@
import { PropType } from 'vue' import { PropType } from 'vue'
import { CreateComponentGroupType } from '@/packages/index.d' import { CreateComponentGroupType } from '@/packages/index.d'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils' import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle } from '../../utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
const props = defineProps({ const props = defineProps({
groupData: { groupData: {

6
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -7,9 +7,9 @@
:style="{ :style="{
...getComponentAttrStyle(item.attr, index), ...getComponentAttrStyle(item.attr, index),
...getFilterStyle(item.styles), ...getFilterStyle(item.styles),
...getTransformStyle(item.styles) ...getTransformStyle(item.styles),
...getStatusStyle(item.status)
}" }"
v-show="!item.status.hide"
> >
<!-- 分组 --> <!-- 分组 -->
<preview-render-group <preview-render-group
@ -39,7 +39,7 @@ import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
import { CreateComponentGroupType } from '@/packages/index.d' import { CreateComponentGroupType } from '@/packages/index.d'
import { chartColors } from '@/settings/chartThemes/index' import { chartColors } from '@/settings/chartThemes/index'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils' import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle } from '../../utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
const props = defineProps({ const props = defineProps({
localStorageInfo: { localStorageInfo: {

13
src/views/preview/utils/style.ts
View File

@ -2,7 +2,7 @@ import { PickCreateComponentType } from '@/packages/index.d'
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
type AttrType = PickCreateComponentType<'attr'> type AttrType = PickCreateComponentType<'attr'>
type StylesType = PickCreateComponentType<'styles'> type StatusType = PickCreateComponentType<'status'>
// 设置位置 // 设置位置
export const getComponentAttrStyle = (attr: AttrType, index: number) => { export const getComponentAttrStyle = (attr: AttrType, index: number) => {
@ -16,10 +16,17 @@ export const getComponentAttrStyle = (attr: AttrType, index: number) => {
// 设置大小 // 设置大小
export const getSizeStyle = (attr: AttrType, scale?: number) => { export const getSizeStyle = (attr: AttrType, scale?: number) => {
return ({ return {
width: `${scale ? scale * attr.w : attr.w}px`, width: `${scale ? scale * attr.w : attr.w}px`,
height: `${scale ? scale * attr.h : attr.h}px` height: `${scale ? scale * attr.h : attr.h}px`
}) }
}
// 设置状态样式
export const getStatusStyle = (attr: StatusType) => {
return {
display: attr.hide ? 'none' : 'block'
}
} }
// 全局样式 // 全局样式