vue使用v12.2 如何解决二次进入详情时样式丢失

收藏

本帖最后由小白菜地里黄于 2023-7-11 11:17 编辑

在vue中使用v12.2版本的设计器源码, 在index.html中引入css和js文件
html.png539260863.png

首次列表进入详情时可正常展示
成功.png272938536.png

返回列表再次进入详情时页面样式丢失
列表.png458291625.png

后面尝试将js放入mounted中通过append方式引入
mounted.png913320617.png

但这样进入详情时就开始报错
报错.png955376281.png

代码报错位置

请问有什么好的解决办法可以在vue路由切换进入详情时正常使用spreadjs?

Clark.Pan · Clark.Pan

本帖最后由 Clark.Pan 于 2023-7-11 12:22 编辑

老的源码版的在线表格编辑器，如果要在VUE框架中使用，请使用iframe的方式进行引用。
或者就是直接使用新版组件版的在线表格编辑器，组件版设计器专门对前端三大框架做了支持。

小白菜地里黄 · 小白菜地里黄

Clark.Pan 发表于 2023-7-11 12:20
老的源码版的在线表格编辑器，如果要在VUE框架中使用，请使用iframe的方式进行引用。
或者就是直接使用新 ...

使用iframe方式引入也会报错 ReferenceError: GC is not defined

Clark.Pan · Clark.Pan

小白菜地里黄发表于 2023-7-11 14:21
使用iframe方式引入也会报错 ReferenceError: GC is not defined

如果iframe引用，那么你对GC的相关操作应该在iframe的工程（源码版在线表格编辑器）中进行，或者使用iframe父子间的参数传输，将GC传到父窗口。

小白菜地里黄 · 小白菜地里黄

本帖最后由小白菜地里黄于 2023-7-12 11:12 编辑

Clark.Pan 发表于 2023-7-12 09:25
如果iframe引用，那么你对GC的相关操作应该在iframe的工程（源码版在线表格编辑器）中进行，或者使用ifra ...

将整个GC对象传参到父窗口, 使用 window.parent.postMessage(JSON.stringify(GC), '*') , 但在 JSON.stringify(GC)过程中, 源码js会报错
1689131425852.jpg994259643.png

如果能正常传GC到父窗口在父窗口操作GC对象 iframe窗口里的编辑器能响应么?

Clark.Pan · Clark.Pan

本帖最后由 Clark.Pan 于 2023-7-12 13:46 编辑

不能JSON.stringify 这样里面的很多方法都没了，还怎么用呢
另外，还需要把spread对象也传到外面

小白菜地里黄 · 小白菜地里黄

Clark.Pan 发表于 2023-7-12 13:44
不能JSON.stringify 这样里面的很多方法都没了，还怎么用呢
另外，还需要把spread对象也传到外面

整个GC大对象怎么通过iframe传给父容器

Clark.Pan · Clark.Pan

类似这样：
var iframeDom = document.getElementById('designer');
      iframeDom.onload = function () {
            var GC = iframeDom.contentWindow.GC;
      }
同样的Iframe中可以将GC对象获取到后挂在window上。

小白菜地里黄 · 小白菜地里黄

Clark.Pan 发表于 2023-7-12 18:12
类似这样：
var iframeDom = document.getElementById('designer');
iframeDom.onload = functio ...

您好问题用这个解决了非常感谢!

Clark.Pan · Clark.Pan

不客气，那就结贴了，有什么问题欢迎另开新帖进行询问。

		自动登录	找回密码
密码			立即注册

[已处理] vue使用v12.2 如何解决二次进入详情时样式丢失

9 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄