vue3-sketch-ruler
Version:
> 是一个基于 Vue 3 + TypeScript 的标尺组件库,适用于低代码平台、大屏可视化、做图工具等场景,提供类似 Photoshop 的缩放与标尺辅助线体验。
2 lines • 2.25 kB
CSS
.h-container[data-v-8e5d5262],.v-container[data-v-8e5d5262]{position:absolute}.h-container[data-v-8e5d5262]{top:0}.v-container[data-v-8e5d5262]{left:0}.lines[data-v-8e5d5262]{pointer-events:none;position:absolute;top:0;left:0}.line[data-v-8e5d5262]{pointer-events:auto;position:absolute}.h-container .line[data-v-8e5d5262]:before,.h-container .line[data-v-8e5d5262]:after{content:"";width:100%;height:4px;position:absolute;left:0}.h-container .line[data-v-8e5d5262]:before{top:-4px}.h-container .line[data-v-8e5d5262]:after{bottom:-4px}.v-container .line[data-v-8e5d5262]:before,.v-container .line[data-v-8e5d5262]:after{content:"";width:4px;height:100%;position:absolute;top:0}.v-container .line[data-v-8e5d5262]:before{left:-4px}.v-container .line[data-v-8e5d5262]:after{right:-4px}.preview-line[data-v-8e5d5262]{pointer-events:none;z-index:5;position:absolute}.line-label[data-v-8e5d5262],.preview-label[data-v-8e5d5262]{color:var(--v6f4fe4e5);white-space:nowrap;pointer-events:none;font-size:12px;position:absolute;transform:scale(.83)}.h-container .line-label[data-v-8e5d5262],.h-container .preview-label[data-v-8e5d5262]{top:14px;left:24px}.v-container .line-label[data-v-8e5d5262],.v-container .preview-label[data-v-8e5d5262]{top:24px;left:10px}.sketch-ruler{z-index:3;width:100%;height:100%;font-size:12px;position:relative;overflow:hidden}.sketch-ruler .canvasedit{transform-origin:0 0}.sketch-ruler .canvasedit-parent{position:absolute;overflow:hidden}.sketch-ruler .corner{z-index:2;pointer-events:auto;cursor:pointer;box-sizing:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain;transition:all .2s ease-in-out;position:absolute;top:0;left:0}.sketch-ruler .default{cursor:default!important}.sketch-ruler .grab{cursor:grab}.sketch-ruler .grabbing{cursor:grabbing}.minimap-container[data-v-9b8a0b2b]{border:1px solid #e0e0e0;border-radius:4px;position:relative;overflow:hidden;box-shadow:0 2px 8px #00000014}.minimap-canvas[data-v-9b8a0b2b]{width:100%;height:100%;display:block}.minimap-viewport[data-v-9b8a0b2b]{cursor:move;pointer-events:auto;box-sizing:border-box;will-change:left, top, width, height;background:#1890ff26;border:1px solid #1890ff;position:absolute}
/*$vite$:1*/