bill 1 yıl önce
ebeveyn
işleme
230874e71d
1 değiştirilmiş dosya ile 26 ekleme ve 9 silme
  1. 26 9
      src/view/case/draw/edit-shape/compass.vue

+ 26 - 9
src/view/case/draw/edit-shape/compass.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item label="方向:">
+  <el-form-item label="角度:">
     <!-- <el-slider
       style="width: 100px"
       :model-value="value"
@@ -9,13 +9,19 @@
       @change="() => setRotate(value as number, true)"
       :max="360"
     /> -->
-    <el-input-number
-      :model-value="value || 0"
-      placeholder="0"
-      @update:model-value="val => setRotate(val as number, false)"
-      :min="0"
-      :max="360"
-    />
+    <div class="last-layout">
+      <el-input-number
+        :model-value="value || 0"
+        placeholder="0"
+        step-strictly
+        :step="1"
+        @update:model-value="val => setRotate(val as number, false)"
+        :min="0"
+        :max="360"
+      >
+      </el-input-number>
+      <span class="last-t">°</span>
+    </div>
   </el-form-item>
 </template>
 <script setup lang="ts">
@@ -26,10 +32,21 @@ const props = defineProps<{ shape: BoardShape }>();
 const emit = defineEmits<{ (e: "blur"): void }>();
 const value = ref<number>(props.shape.data.rotate);
 const setRotate = (edg: number, save: boolean) => {
+  edg = parseInt((edg || 0).toString());
   if (edg !== value.value) {
-    edg = edg || 0;
     value.value = edg;
     props.shape.setRotate(edg, true);
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.last-layout {
+  position: relative;
+}
+.last-t {
+  z-index: 1;
+  position: absolute;
+  transform: translateX(-40px);
+}
+</style>