public-fuse/src/view/case/draw/edit-shape/compass.vue

<template>
  <el-form-item label="角度：">
    <!-- <el-slider
      style="width: 100px"
      :model-value="value"
      :format-tooltip="(val) => `${val}°`"
      @update:model-value="val => setRotate(val as number, false)"
      :min="0"
      @change="() => setRotate(value as number, true)"
      :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">
import { ref } from "vue";
import { BoardShape } from "../board";

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) {
    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>