gorkys / vue-ruler-tool Goto Github PK

demo 报错

我的项目 也要用到类似这样的标尺 不知道直接使用你的会不会出现问题。

当前版本在vue3上不可用

能否设置滚动步长
有些数据需要大步长 比如 10 100 1000这种

请问一下这个可以实现等比例缩放吗，就是实际窗口是500200，但是想让标尺表示17921080

刻度出现了两个0，将刻度第一个删掉
rulerTool.value.xScale.shift(); rulerTool.value.yScale.shift()

刻度是用的背景设置的，把图片下载下来修改为透明图改改颜色，再覆盖回去就可以支持不同主题切换了

如图111容器时可以收缩的，正常时收起，我拖动参考线正常，但我展开后拖动参考线就错位了

[当超出滚动条时，刻度数值不显示怎么解决

建议作者调整一下topSpacing与leftSpacing的获取方式。
源码：

this.topSpacing = document.getElementById('levelRuler').offsetParent.offsetTop
this.leftSpacing =document.getElementById('verticalRuler').offsetParent.offsetLeft

调整：

this.topSpacing = document.getElementById('levelRuler').getBoundingClientRect().y;
this.leftSpacing =document.getElementById('verticalRuler').getBoundingClientRect().x;

测试后暂未发现问题

为什么标尺的位置和刻度线的位置对应不上呢？

根据文档引入
import VueRulerTool from 'vue-ruler-tool'
Vue.component('vue-ruler-tool', VueRulerTool)
vite出现异常
`Could not resolve "./components/vue-ruler-tool"

node_modules/vue-ruler-tool/src/index.js:4:24:
  4 │ export { default } from './components/vue-ruler-tool'
    ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

`

.img {
background: url("../static/images/bg.jpg");
background-size: 100% 100%;
}
或是

这样的打包后，图片不能现实

执行npm install和npm run dev后打开网址，无法运行，控制台html中无内容

切换到其他路由，按F11切换全屏时，控制台报错，见附件。但不影响使用。在使用标尺插件的路由页面没有保错。

Any tips on adding the vue-ruler on top of an existing drag and drop zone / grid? We added the rulers graphically, but we are now debating the implementation of the draggable rulers on top of our dropzone. Any tips would be really helpful.

如题，怎么解决，要做callback或者自己用函数控制么？

<vue-ruler-tool
  :content-layout="{left:200,top:100}"
  :is-scale-revise="true"
  :v-model="presetLine"
>
</vue-ruler-tool>

这个应该是 v-model 不是 :v-model

我用npm安装后按照文档写了一个示例,发现水平和垂直的虚线是可以拖动并且有动画效果的, 但是无法将虚线固定到屏幕上. 即松开鼠标后虚线显示不见了.
后来发现是
<div :style="{top:verticalDottedTop + 'px'}" class="vue-ruler-ref-dot-h" /> <div :style="{left:horizontalDottedLeft + 'px'}" class="vue-ruler-ref-dot-v" />
中: style绑定的时候有问题.
我重新定义了两个响应式data: hStyle和lStyle,
修改上述代码为... :style="hStyle" 和...:style="lStyle" , 并修改方法dottedLineMove 中对x 和y 赋值的地方:

const topPx = this.verticalDottedTop + "px"; this.hStyle = { top: topPx };

const leftPx = this.horizontalDottedLeft + "px"; this.lStyle = { left: leftPx };

然后 就可以了.

我的Vue版本是2.6.10, 感觉像是兼容性问题.