修改添加按钮逻辑

src/components/ImgPanel.vue

@@ -2,7 +2,8 @@
   <div
     style="display: flex;
   flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
-    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'>
+    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'
+      :showSelectedPic="showSelectedPicOrUnSelectedPic">
     </PicPicker>
     <template v-if="ismultiple">
       <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
@@ -31,7 +32,10 @@
         type: String
       },
       isButton: Boolean,
-      ismultiple: Boolean
+      ismultiple: Boolean,
+      showSelectedPicOrUnSelectedPic: {
+        type: Function
+      }
     },
     data() {
       return {

src/components/PicturePicker.vue

@@ -16,7 +16,9 @@
     color:rgba(51,51,51,1);
     line-height:17px;">{{ismultiple?"添加轮播":isButton? "添加按钮":"添加元素"}}</span>
     </div>
-    <input class="input" type="file" @change="fileChange" multiple="true">
+    <div v-if="isButton" @click="showSelectedPic" style="width: 100%;height: 100%; position: absolute;top: 0;left: 0;">
+    </div>
+    <input v-else class="input" type="file" @change="fileChange" multiple="true">
   </label>
 </template>
 
@@ -26,6 +28,7 @@
     cursor: pointer;
     width: 45%;
     height: calc(324px *0.45 * 0.73);
+    position: relative;
   }
 
   .input {
@@ -41,7 +44,10 @@
         type: String
       },
       isButton: Boolean,
-      ismultiple: Boolean
+      ismultiple: Boolean,
+      showSelectedPic: {
+        type: Function
+      }
     },
     methods: {
       fileChange(event) {

src/views/h5editor/index.vue

@@ -269,7 +269,8 @@
           </div>
           <!-- 添加按钮 4 -->
           <div class="panel panel-element clearfix" v-if="panelState === 4">
-            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true" />
+            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true"
+              :showSelectedPicOrUnSelectedPic="uploadSelectedPicOrUnSelectedPic" />
           </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10"