fix: 解决全局滤镜导致TS打包报错问题,修改壁纸不更随滤镜变换的问题

This commit is contained in:
奔跑的面条 2022-05-04 13:21:27 +08:00
parent 3d1ed95bed
commit b402969a44
4 changed files with 37 additions and 2 deletions

View File

@ -13,5 +13,5 @@ export const systemSetting = {
// 图表拖拽时的吸附距离px // 图表拖拽时的吸附距离px
[SettingStoreEnums.CHART_ALIGN_RANGE]: 10, [SettingStoreEnums.CHART_ALIGN_RANGE]: 10,
// 图表工具栏状态(侧边工具状态) // 图表工具栏状态(侧边工具状态)
[SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.ASIDE [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.DOCK
} }

View File

@ -61,6 +61,12 @@ export interface EditCanvasConfigType {
[FilterEnum.CONTRAST]: number [FilterEnum.CONTRAST]: number
// 滤镜-不透明度 // 滤镜-不透明度
[FilterEnum.OPACITY]: number [FilterEnum.OPACITY]: number
// 变换(暂不使用)
[FilterEnum.ROTATE_Z]: number
[FilterEnum.ROTATE_X]: number
[FilterEnum.ROTATE_Y]: number
[FilterEnum.SKEW_X]: number
[FilterEnum.SKEW_Y]: number
// 大屏宽度 // 大屏宽度
[EditCanvasConfigEnum.WIDTH]: number [EditCanvasConfigEnum.WIDTH]: number
// 大屏高度 // 大屏高度

View File

@ -82,6 +82,12 @@ export const useChartEditStore = defineStore({
brightness: 1, brightness: 1,
// 透明度 // 透明度
opacity: 1, opacity: 1,
// 变换(暂不更改)
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
// 默认背景色 // 默认背景色
background: undefined, background: undefined,
backgroundImage: undefined, backgroundImage: undefined,

View File

@ -15,7 +15,10 @@
<!-- 展示 --> <!-- 展示 -->
<edit-range> <edit-range>
<!-- 滤镜预览 --> <!-- 滤镜预览 -->
<div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)"> <div :style="{
...getFilterStyle(chartEditStore.getEditCanvasConfig),
...rangeStyle
}">
<!-- 图表 --> <!-- 图表 -->
<edit-shape-box <edit-shape-box
v-for="(item, index) in chartEditStore.getComponentList" v-for="(item, index) in chartEditStore.getComponentList"
@ -98,6 +101,26 @@ const themeColor = computed(() => {
return chartColors[chartThemeColor] return chartColors[chartThemeColor]
}) })
//
const rangeStyle = computed(() => {
//
const background = chartEditStore.getEditCanvasConfig.background
const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage
const selectColor = chartEditStore.getEditCanvasConfig.selectColor
const backgroundColor = background ? background : undefined
const computedBackground = selectColor
? { background: backgroundColor }
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
// @ts-ignore
return {
...computedBackground,
width: 'inherit',
height: 'inherit'
}
})
// //
onMounted(() => { onMounted(() => {
useAddKeyboard() useAddKeyboard()