relation-graph遇到的一些问题总结

因为我的项目是需要兼容低版本火狐的,所以主要还是火狐的问题哈

一、首先,最遗憾的是官网没了。。(很尴尬)

我刚用上,项目都还没弄完,网站没了,文档成了问题

解决:

  1. 暂时先借鉴别人做的兼容vue3的 readme 文档,我看基本都可以用,你要是vue3也可以直接用,至少这个作者还在更新 |ू・ω・` )
    vue-relation
  2. 直接git下作者的代码,主要看 doc/demo 文件夹,是官网的demo例子,也比较方便理解
    relation-graph

二、火狐浏览器节点错位、乱问题

我这里大概是这个鬼样子
relation-graph遇到的一些问题总结_第1张图片
解决:

// 主要代码
<style lang="scss" scoped>
	.rel-node {
		transform: none !important;
	}
style>

这里其实我外面还有一层,然后里面这个rel-node找不到,所以用了::v-deep,下面是我用的情况
relation-graph遇到的一些问题总结_第2张图片

三、火狐js报错问题

在这里插入图片描述
没办法,火狐版本太低了,他不认**这种高级糖
解决:
找到 relation-graph.min.js 更改里面的所有这种地方,搜索文件你就搜索 **前后有一个空格哈,然后全部改成 Math.pow() 格式
如果你不想更改node_module,你可以直接把relation-graph.min.js放在你的components里面直接引用

四、增加中间节点问题

是这样的,我需要在两个节点中间增加一个节点,如果直接通过 getNodes 删减后一个节点,再appendJsonData是不行的,关系的line会错乱
解决:先用removeNodeById把后一个节点删除,然后再appendJsonData添加新节点和后一个节点,关系link也要加上,不要忘了

五、火狐滚轮无法放大缩小

还是火狐的兼容问题
解决:relation-graph.min.js 找到 mouseListener 方法中判断这里,加上或者判定

if (_deltaY === undefined) {
	_deltaY = e.wheelDelta || e.detail;
}

relation-graph遇到的一些问题总结_第3张图片

六、火狐点击连线,连线消失

relation-graph遇到的一些问题总结_第4张图片
relation-graph遇到的一些问题总结_第5张图片
我看是作者做的一个火狐兼容,但是我这个版本火狐可能不需要这个兼容
relation-graph遇到的一些问题总结_第6张图片

解决:搜索 c-rg-line-checked 删除框选区域


最后,作者都不维护了,要不还是换一个吧 (′へ`、)

最新:官网恢复了!!!!(感动中国我一定要投他一票)


git终于有大哥缓存了部分文档
relation-graph遇到的一些问题总结_第7张图片
relation-graph遇到的一些问题总结_第8张图片
relation-graph遇到的一些问题总结_第9张图片
relation-graph遇到的一些问题总结_第10张图片
relation-graph遇到的一些问题总结_第11张图片
relation-graph遇到的一些问题总结_第12张图片

relation-graph遇到的一些问题总结_第13张图片
relation-graph遇到的一些问题总结_第14张图片

你可能感兴趣的:(javascript,前端,vue.js)