元素管理UI

src/components/EditPanel.vue

@@ -148,7 +148,7 @@
         </div>
 
         <div style="vertical-align: middle;border-bottom: #E2E4EE solid 1px;padding-bottom: 12px; padding-top: 11px;"
-          v-show="panelState!=15">
+          >
           <div style="display: inline-flex; width:24%;text-align: left; margin-bottom: 10px;">
             <div style="font-size:12px;
             font-family:MicrosoftYaHei;
@@ -271,7 +271,7 @@
           </div>
         </div>
         <div style="text-align: left;border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px;"
-          v-show="panelState!=15 && panelState != 13">
+          v-show="panelState != 13">
           <div style="display: inline-flex; margin-left: -6px" v-show="panelState == 11">
             <el-checkbox v-model="element.fontWeight" true-label="bold" false-label="normal">加粗</el-checkbox>
           </div>
@@ -283,7 +283,7 @@
             </el-checkbox>
           </div>
 
-          <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 12">
+          <div style="width: 100%;display: inline-flex; padding: 12px 0 ;border-bottom: #E2E4EE solid 1px; margin-left:-20px; padding-left: 20px;" v-show="panelState == 12">
             <div>
               <div :style="{ backgroundImage: 'url(' + element.imgSrc + ')','width':'100px', 'height':'100px','background-repeat': 'no-repeat',
               'background-position': 'center',
@@ -314,25 +314,27 @@
             </div>
           </div>
 
-          <div style="display: inline-flex;" v-show="panelState != 14 && panelState != 16 && panelState != 12">
+          <div style="display: inline-flex;margin-right: 10px;" v-show="panelState != 14 && panelState != 16">
             <el-checkbox v-model="element.elabEditable">可编辑</el-checkbox>
           </div>
-          <div v-show="panelState != 14 && panelState != 16 && panelState != 12" style="width:44px;
-          height:24px;
-          background:rgba(78,93,255,1);
-          border-radius:12px;font-size:12px;
-          font-family:MicrosoftYaHei;
-          display: inline-block;
-          text-align: center;
-          justify-content: center;
-          line-height: 24px;
-          margin-left: 10px;
-          color:rgba(255,255,255,1);" @click="setGroup(element)">{{element.children.length>0?'解组':'组合'}}</div>
+          <div style="width: 70px;height:41px;line-height: 41px; display: inline-block;" v-show="panelState != 16">
+            <div style="width:44px;
+            height:24px;
+            background:rgba(78,93,255,1);
+            border-radius:12px;font-size:12px;
+            font-family:MicrosoftYaHei;
+            display: inline-block;
+            text-align: center;
+            justify-content: center;
+            line-height: 24px;
+            color:rgba(255,255,255,1);" @click="setGroup(element)">{{element.children.length>0?'解组':'组合'}}</div>
+          </div>
+          
         </div>
       </div>
 
       <div style="border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px; padding-bottom: 11px;"
-        v-show="panelState!=15 ">
+       >
         <div>
           <div style="font-size:12px;
           font-family:MicrosoftYaHei;
@@ -386,24 +388,24 @@
       </div>
 
       <div class="item"></div>
-      <div style="border-bottom: #E2E4EE solid 1px; padding-bottom: 11px;">
+      <div style="border-bottom: #E2E4EE solid 1px; padding-bottom: 11px;" v-show="panelState!=14">
         <div style="display:flex; flex-direction: row;margin-left: 18px;">
-          <div v-show="panelState!=14" style="font-size:12px;
+          <div  style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);
             display: inline-block;
             line-height:38px;">
             透明度</div>
-          <el-slider v-show="panelState!=14" v-model="element.opacity" show-input input-size="mini"
+          <el-slider  v-model="element.opacity" show-input input-size="mini"
             style="width: 80%;margin-left: 10px;"></el-slider>
         </div>
         <div style="display:flex; flex-direction: row;margin-left: 18px;">
-          <span v-show="panelState!=14" style="font-size:12px;
+          <span style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1); display: inline-block;
                 line-height:38px;
             letter-spacing: 0;">&nbsp&nbsp&nbsp旋转</span>
-          <el-slider v-show="panelState!=14" v-model="element.transform" show-input input-size="mini" :max="359"
+          <el-slider v-model="element.transform" show-input input-size="mini" :max="359"
             style="width: 80%;margin-left: 10px;">
           </el-slider>
         </div>

src/views/h5editor/index.vue

@@ -495,6 +495,9 @@ export default {
       let obj = {};
       obj.type = "button";
       obj.top = document.getElementById("h5editor").scrollTop;
+      obj["text"] = "请输入文本";
+      obj["lineHeight"] = 1.5;
+   
       obj.left = 0;
       obj.width = ele.width;
       obj.height = ele.height;