diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue index 2f766668..d50bc5b5 100644 --- a/src/views/preview/index.vue +++ b/src/views/preview/index.vue @@ -24,7 +24,7 @@ import type { ChartEditStorageType } from './index.d' const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType -const previewRefStyle: any = computed(() => { +const previewRefStyle = computed(() => { return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getStyle(localStorageInfo.editCanvasConfig) } }) diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts index 1a8845b9..a0fd37ca 100644 --- a/src/views/preview/utils/style.ts +++ b/src/views/preview/utils/style.ts @@ -4,6 +4,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt type AttrType = PickCreateComponentType<'attr'> type StylesType = PickCreateComponentType<'styles'> +// 设置位置 export const getComponentAttrStyle = (attr: AttrType, index: number) => { const componentStyle = { zIndex: index + 1, @@ -13,6 +14,7 @@ export const getComponentAttrStyle = (attr: AttrType, index: number) => { return componentStyle } +// 设置大小 export const getSizeStyle = (attr: AttrType, scale?: number) => { const sizeStyle = { width: `${scale ? scale * attr.w : attr.w}px`, @@ -21,6 +23,7 @@ export const getSizeStyle = (attr: AttrType, scale?: number) => { return sizeStyle } +// 全局样式 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => { // 背景 const computedBackground = canvas.selectColor @@ -44,7 +47,7 @@ export const animationsClass = (animations: string[]) => { return '' } -// 样式 +// 滤镜 export const getStyle = (styles: StylesType | EditCanvasConfigType) => { const { opacity, saturate, contrast, hueRotate, brightness } = styles return {