|
@@ -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()
|