From 3266d853c40d075710c1665d5c80571f1e0433c3 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Tue, 12 Jan 2021 10:33:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B5=E9=9D=A2=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=9B=BE=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useSlideBackgroundStyle.ts         |  1 +
 src/views/Editor/Toolbar/SlideStylePanel.vue | 11 +++--------
 2 files changed, 4 insertions(+), 8 deletions(-)

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<SlideBackground | undefined>) => {
     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 @@
     <div class="background-image-wrapper" v-if="background.type === 'image'">
       <FileInput @change="files => uploadBackgroundImage(files)">
         <div class="background-image">
-          <div 
-            class="content"
-            :style="backgroundStyle"
-          >
+          <div class="content" :style="{ backgroundImage: `url(${background.value})` }">
             <IconFont type="icon-plus" />
           </div>
         </div>
@@ -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;
   }
 }