按钮替换背景

src/views/h5editor/index.vue

@@ -275,7 +275,7 @@
           </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"
-            :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
+            :showSelectedPicOrUnSelectedPic="changeSelectedPicOrUnSelectedPic" />
         </div>
       </div>
     </section>
@@ -457,6 +457,7 @@
         buttonData: {},
         unSelectedButtom: false,
         selectedButtom: false,
+        isChangeStatus: false,
       };
     },
     watch: {
@@ -920,11 +921,16 @@
       uploadSelectedPicOrUnSelectedPic() {
         this.dialogVisible = true;
       },
+      changeSelectedPicOrUnSelectedPic() {
+        this.dialogVisible = true;
+        this.isChangeStatus = true;
+      },
       closeUploadButton() {
         this.buttonData = {};
         this.dialogVisible = false;
         this.selectedButtom = false;
         this.unSelectedButtom = false;
+        this.isChangeStatus = false;
       },
       async upload(event, isSelected) {
         var that = this;
@@ -970,18 +976,26 @@
       },
       uploadButton() {
         let that = this;
-        that.$store.dispatch('savePic', {
-          'backgroundUnselectedImg': that.buttonData.backgroundUnselectedImg,
-          'backgroundSelectedImg': that.buttonData.backgroundSelectedImg,
-          'themeId': that.buttonData.itemId,
-          'width': that.buttonData.width,
-          'height': that.buttonData.height,
-          'isButton': that.buttonData.isButton,
-        })
+        if (this.isChangeStatus) {
+          this.element.backgroundUnselectedImg = that.buttonData.backgroundUnselectedImg;
+          this.element.backgroundSelectedImg = that.buttonData.backgroundSelectedImg;
+          this.element.width = that.buttonData.width;
+          this.element.height = that.buttonData.height;
+        } else {
+          that.$store.dispatch('savePic', {
+            'backgroundUnselectedImg': that.buttonData.backgroundUnselectedImg,
+            'backgroundSelectedImg': that.buttonData.backgroundSelectedImg,
+            'themeId': that.buttonData.itemId,
+            'width': that.buttonData.width,
+            'height': that.buttonData.height,
+            'isButton': that.buttonData.isButton,
+          })
+        }
         that.buttonData = {};
         that.dialogVisible = false;
         that.selectedButtom = false;
         that.unSelectedButtom = false;
+        this.isChangeStatus = false;
       }
     },
     components: {