diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index c73e8c73..36052ad9 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -8,6 +8,7 @@ export default (background: Ref) => { const { type, value, size } = background.value if(type === 'solid') return { backgroundColor: value } else if(type === 'image') { + if(!value) return { backgroundColor: '#fff' } if(size === 'repeat') { return { backgroundImage: `url(${value}`, diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index a949da6b..bde27d8e 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -35,10 +35,7 @@
-
+
@@ -57,7 +54,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot' import ColorButton from './common/ColorButton.vue' import { getImageDataURL } from '@/utils/image' -import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle' export default defineComponent({ name: 'slide-style-panel', @@ -79,8 +75,6 @@ export default defineComponent({ return currentSlide.value.background }) - const { backgroundStyle } = useSlideBackgroundStyle(background) - const { addHistorySnapshot } = useHistorySnapshot() const updateBackgroundType = (type: 'solid' | 'image') => { @@ -126,7 +120,6 @@ export default defineComponent({ return { background, - backgroundStyle, updateBackgroundType, updateBackground, uploadBackgroundImage, @@ -172,6 +165,8 @@ export default defineComponent({ justify-content: center; align-items: center; background-position: center; + background-size: contain; + background-repeat: no-repeat; cursor: pointer; } }