调研宝

添加按钮功能修改

src/views/h5editor/index.vue

@@ -295,12 +295,12 @@
               <div style="margin-top: 5px; height:100%;vertical-align: middle;padding-right:10px">
                 <div style="display: inline-flex; overflow: hidden;">
                   <div
-                    style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;width:100%"
+                    style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;width:100%;padding-left:10px;"
                   >组合对齐布局</div>
                 </div>
-                <div style="margin-top: 10px">
+                <div style="margin-top: 10px; padding-left:10px;">
                   <div
-                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center"
+                    style="display: inline-flex; overflow: hidden; cursor: pointer; text-align: center"
                   >
                     <div
                       @click="toLeft"
@@ -308,45 +308,42 @@
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/icon_left2.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_left.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
                   <div
                     title="水平居中对齐"
-                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
+                    style="display: inline-flex; overflow: hidden; cursor: pointer;text-align: center"
                     @click="toCenter"
                   >
                     <div
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/horizontal_center.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_centered.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
                   <div
                     title="右对齐"
-                    style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
+                    style="display: inline-flex;cursor: pointer; text-align: center"
                     @click="toRight"
                   >
                     <div
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/icon_right2.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_right.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
 
                   <div
-                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center"
+                    style="display: inline-flex; overflow: hidden; cursor: pointer; text-align: center"
                   >
                     <div
                       @click="toTop"
@@ -354,39 +351,36 @@
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/icon_top.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_top.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
                   <div
                     title="垂直居中对齐"
-                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
+                    style="display: inline-flex; overflow: hidden; cursor: pointer;text-align: center"
                     @click="toVertialCenter"
                   >
                     <div
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/vertical_center.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_centered.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
                   <div
                     title="下对齐"
-                    style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
+                    style="display: inline-flex;cursor: pointer; text-align: center"
                     @click="toBottom"
                   >
                     <div
                       :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}"
                     >
                       <img
-                        src="http://yun-image.elab-plus.com/images/tfb/icon_down.png"
-                        width="20"
-                        height="20"
+                        src="http://yun-image.elab-plus.com/images/dyb/icon_text_bottom.png"
+                        class="combinationIcon"
                       />
                     </div>
                   </div>
@@ -527,7 +521,7 @@
                 style="display: none;"
                 type="file"
                 multiple
-                @change="changeSelectedPicOrUnSelectedPic($event, true)"
+                @change="changeSelectedPicOrUnSelectedPic($event, true, 'left')"
               />
             </label>
           </div>
@@ -599,7 +593,7 @@
                 style="display: none;"
                 type="file"
                 multiple
-                @change="changeSelectedPicOrUnSelectedPic($event, true)"
+                @change="changeSelectedPicOrUnSelectedPic($event, true, 'right')"
               />
             </label>
           </div>
@@ -1230,7 +1224,7 @@ export default {
     uploadSelectedPicOrUnSelectedPic() {
       this.dialogVisible = true;
     },
-    async changeSelectedPicOrUnSelectedPic(event, isAddButton) {
+    async changeSelectedPicOrUnSelectedPic(event, isAddButton, position) {
       var that = this;
       let files = event.target.files;
       if (!files.length) {
@@ -1260,11 +1254,19 @@ export default {
                     that.buttonData.backgroundUnselectedImg = res;
                     that.uploadButtonImg("single");
                   } else {
-                    that.buttonData.backgroundSelectedImg = res;
-                    that.selectedButtom = false;
-                    var param = setTimeout(() => {
-                      that.selectedButtom = true;
-                    }, 1);
+                    if (position == "left") {
+                      that.buttonData.backgroundUnselectedImg = res;
+                      that.unSelectedButtom = false;
+                      var param = setTimeout(() => {
+                        that.unSelectedButtom = true;
+                      }, 1);
+                    } else if (position == "right") {
+                      that.buttonData.backgroundSelectedImg = res;
+                      that.selectedButtom = false;
+                      var param = setTimeout(() => {
+                        that.selectedButtom = true;
+                      }, 1);
+                    }
                   }
                 };
                 img.src = res;
@@ -1746,6 +1748,12 @@ export default {
   }
 }
 
+.combinationIcon {
+  width: 62px;
+  height: 24px;
+  object-fit: cover;
+}
+
 /* 2018/07/23 所有前台自定义字体，需要放七牛云服务器上，暂时放这个样式文件里面 */
 @font-face {
   font-family: "PenCrane";