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"
    /> -->
    <el-input-number
      :model-value="value"
      @update:model-value="val => setRotate(val as number, false)"
      :min="0"
      :max="360"
    />
  </el-form-item>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { BoardShape } from "../board";
import { ElSlider } from "element-plus";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{ (e: "blur"): void }>();
const value = ref<number>(props.shape.data.rotate);
console.log(props.shape);
const setRotate = (edg: number, save: boolean) => {
  value.value = edg;
  props.shape.setRotate(edg, save);
};
</script>