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

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

View File

@ -13,5 +13,5 @@ export const systemSetting = {
// 图表拖拽时的吸附距离px
[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.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
// 大屏高度

View File

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

View File

@ -15,7 +15,10 @@
<!-- 展示 -->
<edit-range>
<!-- 滤镜预览 -->
<div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
<div :style="{
...getFilterStyle(chartEditStore.getEditCanvasConfig),
...rangeStyle
}">
<!-- 图表 -->
<edit-shape-box
v-for="(item, index) in chartEditStore.getComponentList"
@ -98,6 +101,26 @@ const themeColor = computed(() => {
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(() => {
useAddKeyboard()