我暂时没有支持拖拽,如果有业务需求,后续我会在补充,这个其实就是展示一个尺子;
我这里订的单位是每个小格子20px,200px是一个大格子;
html
<div class="ruler">
<div
v-for="tick in ticks"
:key="tick"
class="ruler-line"
:style="getTickStyle(tick)"
>
<span class="tick-text">{{ tick }}</span>
</div>
</div>
ts部分
this.imgContentHeight / this.defaultImgContentHeight 这个是因为 我的这个div是包含放大缩小的 但是尺子的总高度不能变化了
// 尺子样式
private setTicks () {
// const divisor = 2 * Math.pow(10, Math.floor(this.imgContentHeight).toString().length - 5);
const divisor = 20; // 一个小格子为20
// this.divisor = 2 * Math.pow(10, Math.floor(this.imgContentHeight).toString().length - 4);
this.divisor = 200; // 一个大格子为200
const length = Math.ceil(this.imgContentHeight / divisor);
this.ticks = Array.from({ length }, (_, index) => index * divisor);
}
private getTickStyle (tick) {
return {
top: tick / (1 / (this.imgContentHeight / this.defaultImgContentHeight)) + 'px',
width: tick % this.divisor === 0 ? '16px' : tick % (this.divisor / 2) === 0 ? '4px' : '2px',
fontSize: this.multiples !== 0.2 ? tick % this.divisor === 0 ? '12px' : '0' : tick % (this.divisor * 2) === 0 ? '12px' : '0'
};
}
css
.ruler {
width: 16px;
height: 100%;
background-color: #000;
position: relative;
}
.ruler-line {
position: absolute;
right: 0px;
border-top: 1px solid #fff;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-right: 5px;
}
.tick-text {
right: -1px;
bottom: -22px;
color: #fff;
transform: rotate(180deg);
position: absolute;
writing-mode: vertical-lr;
}