替换元素

src/components/EditPanel.vue

@@ -58,15 +58,22 @@
             line-height:19px;">
               {{element.imgSrc|currentImageName}}
             </span>
-            <div style="width:108px;
-            height:28px;
-            background:rgba(78,93,255,1);
-            border-radius:14px;font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(255,255,255,1);
-            display: flex;
-            justify-content: center;
-            line-height:28px;">替换元素</div>
+
+            <label style="display: block;
+            cursor: pointer; width:108px;
+              height:28px;">
+              <div style="width:108px;
+              height:28px;
+              background:rgba(78,93,255,1);
+              border-radius:14px;font-size:14px;
+              font-family:MicrosoftYaHei;
+              color:rgba(255,255,255,1);
+              display: flex;
+              justify-content: center;
+              line-height:28px;">替换元素
+              </div>
+              <input style="display: none;" type="file" @click="changeElementBg" multiple="false">
+            </label>
           </div>
         </div>
         <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
@@ -305,15 +312,21 @@
               line-height:19px;">
                 {{element.imgSrc|currentImageName}}
               </span>
-              <div style="width:108px;
-              height:28px;
-              background:rgba(78,93,255,1);
-              border-radius:14px;font-size:14px;
-              font-family:MicrosoftYaHei;
-              color:rgba(255,255,255,1);
-              display: flex;
-              justify-content: center;
-              line-height:28px;">替换元素</div>
+              <label style="display: block;
+              cursor: pointer; width:108px;
+                height:28px;">
+                <div style="width:108px;
+                height:28px;
+                background:rgba(78,93,255,1);
+                border-radius:14px;font-size:14px;
+                font-family:MicrosoftYaHei;
+                color:rgba(255,255,255,1);
+                display: flex;
+                justify-content: center;
+                line-height:28px;">替换元素
+                </div>
+                <input style="display: none;" type="file" @click="changeElementBg" multiple="false">
+              </label>
             </div>
           </div>
 
@@ -531,7 +544,7 @@
         <div style="margin-bottom: 12px;">
           <span
             style="font-size:12px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);line-height:16px; margin-left: 20px;">相对固定</span>
-          <el-switch v-model="value" active-color="#4E5DFF" inactive-color="#D7E2FF">
+          <el-switch v-model="element.isFixed" active-color="#4E5DFF" inactive-color="#D7E2FF">
           </el-switch>
         </div>
       </div>
@@ -1036,6 +1049,10 @@
           that.$message.error("组合失败！")
         }
       },
+      changeElementBg(element) {
+        console.log('地址', element);
+
+      },
     },
     computed: {
       elements() {