You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.3 KiB
98 lines
2.3 KiB
<script lang="ts" setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
// 接收外部传入的最大刻度值参数，比如 3000、5000 等
|
|
// const props = defineProps({
|
|
// maxScale: {
|
|
// type: number
|
|
// default: 2500
|
|
// },
|
|
// rulerHeight: {
|
|
// type: number
|
|
// default: 0
|
|
// }
|
|
// })
|
|
|
|
const props = defineProps({
|
|
maxScale: {
|
|
type: Number,
|
|
default: 2500,
|
|
},
|
|
rulerHeight: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
|
|
// 基础配置，可根据需求调整
|
|
const baseInterval = 300 // 大刻度间隔（显示文字的刻度间隔）
|
|
const smallInterval = 20 // 小刻度间隔
|
|
const totalHeight = ref(props.rulerHeight) // 刻度标尺总高度（px）
|
|
const markHeight = 2 // 刻度线高度（px）
|
|
|
|
watch(props.rulerHeight, (newVal) => {
|
|
totalHeight.value = newVal
|
|
})
|
|
|
|
// 计算要渲染的刻度数据
|
|
const renderedMarks = computed(() => {
|
|
const marks: Liquid.Marks[] = []
|
|
for (let value = 0; value <= Number(props.maxScale); value += smallInterval) {
|
|
const showText = value % baseInterval === 0 || value % Number(props.maxScale) === 0
|
|
const startY = (value / Number(props.maxScale)) * totalHeight.value
|
|
marks.push({ value, startY, showText })
|
|
}
|
|
return marks
|
|
})
|
|
|
|
const rulerWidth = (mark) => {
|
|
console.log('mark--', mark)
|
|
if (mark.value % 100 === 0) {
|
|
return 80
|
|
}
|
|
|
|
if (mark.value % 5 === 0) {
|
|
return 40
|
|
}
|
|
return 20
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="scale-ruler-container" :style="{ height: `${totalHeight}px` }">
|
|
<div
|
|
v-for="(mark, index) in renderedMarks"
|
|
:key="index"
|
|
class="scale-mark"
|
|
:style="{
|
|
height: `${markHeight}px`,
|
|
top: `${totalHeight - mark.startY}` + 'px',
|
|
width: `${rulerWidth(mark)}%`,
|
|
}"
|
|
>
|
|
<div v-if="mark.showText" class="mark-text" :style="{ transform: 'translateX(-120%) translateY(-50%)' }">
|
|
<div>{{ mark.value }}g</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.scale-ruler-container {
|
|
position: relative;
|
|
width: 40px; /* 刻度容器宽度，可按需调整 */
|
|
border-left: 1px solid #000; /* 刻度标尺边框 */
|
|
margin-left: 20px; /* 给文字留出显示空间，可按需调整 */
|
|
}
|
|
|
|
.scale-mark {
|
|
position: absolute;
|
|
background-color: #000;
|
|
}
|
|
|
|
.mark-text {
|
|
position: absolute;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|