Browse Source

右侧属性栏,图片添加 R旋转角度(禁用状态)

yunxing 4 years ago
parent
commit
6a7363442a
1 changed files with 38 additions and 1 deletions
  1. 38 1
      src/components/editview/rightPropertyBar/BaseImagePro.vue

+ 38 - 1
src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -17,6 +17,19 @@
                     <div @click="lockItem" :title="isLock ? '锁定' : '解锁'">
                         <i class="el-icon-link" :style="{ color: isLock ? '#409EFF' : '', cursor: 'pointer' }"></i>
                     </div>
+                    <div class="rotate">
+                        <span>R</span>
+                        <el-input
+                            disabled
+                            style="width: 74px; margin-left: 6px"
+                            size="mini"
+                            type="number"
+                            v-model="rotate"
+                            placeholder="输入角度"
+                        >
+                            <template slot="suffix">°</template>
+                        </el-input>
+                    </div>
                 </div>
             </li>
             <li class="m-picture">
@@ -137,6 +150,22 @@ export default {
             },
         },
         /**
+         * 图片角度
+         */
+        rotate: {
+            get() {
+                return this.ImageItem.rotate
+            },
+            set(newV) {
+                const oldV = this.ImageItem.rotate
+                // 宽度改变,修改对象的宽度
+                if (newV !== oldV) {
+                    this.ImageItem.rotate = newV;
+                    bus.$emit("undoAttr", this.ImageItem, "rotate", oldV, newV);
+                }
+            }
+        },
+        /**
          * 边框线宽
          */
         lineWidth: {
@@ -195,7 +224,9 @@ export default {
             },
         },
     },
-    mounted() { },
+    mounted() {
+        console.log(this.ImageItem)
+    },
     methods: {
         /**
          * 切换锁状态
@@ -334,6 +365,7 @@ li {
                 display: flex;
                 align-items: center;
                 justify-content: space-around;
+                flex-wrap: wrap;
                 .color-box {
                     display: flex;
                     align-items: center;
@@ -367,6 +399,11 @@ li {
                     font-weight: 600;
                     margin-top: 4px;
                 }
+                .rotate {
+                    flex-basis: 100%;
+                    margin-left: 7px;
+                    margin-top: 10px;
+                }
             }
         }
         li.m-picture {