diff --git a/src/types/slides.ts b/src/types/slides.ts
index e4eddc8d..29b50488 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -216,18 +216,6 @@ export interface ImageElementClip {
shape: string
}
-/**
- * 图片蒙版
- *
- * color: 蒙版颜色
- *
- * opacity: 蒙版透明度
- */
-export interface ImageColorElementMask {
- color: string
- opacity: number
-}
-
/**
* 图片元素
*
@@ -259,7 +247,7 @@ export interface PPTImageElement extends PPTBaseElement {
flipH?: boolean
flipV?: boolean
shadow?: PPTElementShadow
- colorMask?: ImageColorElementMask
+ colorMask?: string
}
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 148f59a2..bb9ed807 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -15,24 +15,13 @@
updateColorMask({ color: value })"
+ :modelValue="colorMask"
+ @update:modelValue="value => updateColorMask(value)"
/>
-
+
-
-
不透明度:
-
updateColorMask({ opacity: value as number })"
- style="width: 60%;"
- />
-
@@ -41,21 +30,19 @@
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
-import type { ImageColorElementMask } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ColorButton from './ColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import Switch from '@/components/Switch.vue'
-import Slider from '@/components/Slider.vue'
import Popover from '@/components/Popover.vue'
-const defaultColorMask = { color: 'transparent', opacity: 0.3 }
+const defaultColorMask = 'rgba(226, 83, 77, 0.5)'
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(useMainStore())
-const colorMask = ref(defaultColorMask)
+const colorMask = ref(defaultColorMask)
const hasColorMask = ref(false)
const { addHistorySnapshot } = useHistorySnapshot()
@@ -81,9 +68,8 @@ const toggleColorMask = (checked: boolean) => {
addHistorySnapshot()
}
-const updateColorMask = (colorMaskProp: Partial) => {
- const newColorMask = { ...colorMask.value, ...colorMaskProp }
- slidesStore.updateElement({ id: handleElementId.value, props: { colorMask: newColorMask } })
+const updateColorMask = (colorMask: string) => {
+ slidesStore.updateElement({ id: handleElementId.value, props: { colorMask } })
addHistorySnapshot()
}
diff --git a/src/views/components/element/ImageElement/BaseImageElement.vue b/src/views/components/element/ImageElement/BaseImageElement.vue
index d1a0bee9..c7bce8f4 100644
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@@ -37,8 +37,7 @@
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index 8f96d3e7..972743a3 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -55,8 +55,7 @@