Mars3d的html 模板中使用element-ui 组件参考

​
首先重点是：不能直接用，需要使用webcomponent，基础项目里面有个demo可以参考

以下是开发聊天记录：（供参考）

SHMILY  10-13 10:30:59
大佬们这个层没办法定义成一个组件嘛?

 

Jstak  10-13 10:33:58
可以，但是你渲染的时候还是得渲染成html加载

SHMILY   10-13 10:34:32
怎么定义能说下么

SHMILY  10-13 10:34:33
我找不到

大理小段段 10-13 10:34:35
logo去掉只能付费吗

一个高手  10-13 10:35:32
有没有vue基础版的课程啊 

繁星 10-13 10:36:00
黑马程序员  b站，免费

木遥 10-13 10:36:18
@大理小段段  考虑到我们团队的长久生存及可持续发展，目前是需要付费去logo的，付费可以让我们产品做得更好、更长久，也感谢您的支持和选择。

Jstak  10-13 10:36:28
「SHMILY：怎么定义能说下么」
- - - - - - - - - - - - - - -
组件你就正常定义，popup是支持html模板加载的，你只需要在加载的时候用vue的方式挂载html元素放上去就行了

一个高手 10-13 10:37:08

一个高手 10-13 10:37:12
这个项目的课程

程迷学习 10-13 10:38:42
代码里备注全是木遥

不忍 10-13 10:40:00
cesium除了写shader比较恶心，大部分都还好。

墩墩 10-13 10:42:09
@一个高手  https://www.bilibili.com/video/BV1JF411q7Ut/

SHMILY 10-13 10:42:35
「Jstak：组件你就正常定义，popup是支持html模板加载的，你只需要在加载的时候用vue的方式挂载html元素放上去就行了」
- - - - - - - - - - - - - - -
什么叫用vue的方式挂在html元素放上去

SHMILY 10-13 10:43:18
能具体说说么

不忍 10-13 10:45:28
不懂啊

Jstak 10-13 10:47:16
「SHMILY：能具体说说么」
- - - - - - - - - - - - - - -
你是vue2还是3？vue3中可以用createApp挂载一个界面元素然后获得dom节点，然后挂载的元素不用显示，把挂载的dom节点拷贝一份用于popup的html模板就行了  vue2好像要用extend

不忍 10-13 10:47:36
何必那么麻烦。

不忍 10-13 10:47:48
为什么不问问神奇海螺呢。

Jstak 10-13 10:48:11
神奇海螺是啥

SHMILY 10-13 10:48:12
神奇海螺是什么

不忍 10-13 10:48:14
直接在vue里把popup的dom写出来，帧动画执行的时候去更新dom的位置。

不忍 10-13 10:48:29
这不是更简单么。

Jstak 10-13 10:48:43
他是想用组件封装的方式，肯定是想用vue的语法

Jstak 10-13 10:48:55
直接写html就不用了

不忍 10-13 10:48:55
mars3d也是这么实现的。

不忍 10-13 10:49:26
jsx试过了么？

SHMILY 10-13 10:49:38
我是vue3

不忍 10-13 10:49:41
这个东西我还没咋用过，不是很熟悉。

不忍 10-13 10:50:06

Jstak 10-13 10:51:40
一样的，都是需要渲染的，我之前也想了很久，有没有直接不渲染获取dom节点的方式，结果是不行

Jstak 10-13 10:52:06
因为不加载到界面上，就没有dom节点这个说话，就只是单纯的一个文本

不忍 10-13 10:52:44
有点高深了

不忍10-13 10:52:52
去问一下神奇的海螺吧。

不忍 10-13 10:53:00
@Jstak 老哥用vite么？

SHMILY 10-13 10:53:01
那样我能和当前这个页面数据交互嘛?

不忍 10-13 10:53:05
我遇到一点问题。

zz 10-13 10:53:19
jsx写不太习惯，还是用template了

程迷学习 10-13 10:53:36
的确

Jstak 10-13 10:53:47
「SHMILY：那样我能和当前这个页面数据交互嘛?」
- - - - - - - - - - - - - - -
不影响，你封装的组件，在组件中的语法不冲突

Jstak 10-13 10:54:09
「不忍：@Jstak 老哥用vite么？」
- - - - - - - - - - - - - - -
用的vite2，也转过来没多久

不忍 10-13 10:54:23
我集成cesium发现一点问题。

zz 10-13 10:55:00
vite有一个cesium得插件用了吗

不忍 10-13 10:55:08
用的就是那个

不忍 10-13 10:55:11
有点问题

zz 10-13 10:55:36
我用得正常

Jstak 10-13 10:55:39
啥问题，可以说说看，说不定也遇到过

不忍 10-13 10:55:49

 

不忍10-13 10:56:10
那个插件把cesium的引用加在了上面

不忍 10-13 10:56:36
导致我loading出不来，loading是我照着插件写的，加在了cesium的上面，还是没生效。

不忍 10-13 10:57:38
其实改成这样就好了，手动改不是很优雅。

不忍 10-13 10:57:39

 

不忍 10-13 10:58:31

 

不忍10-13 10:59:02
大概就是这么个问题，如果在加载cesium的时候可以显示loading效果。

Jstak 10-13 11:00:18
这个只能无能为力了，估计得对vite的构建原理要有了解，只是没太明白为什么cesium会影响你的loading加载

不忍 10-13 11:00:35
你们的loading都是怎么实现的？

zz 10-13 11:01:21

 

zz 10-13 11:01:26
这俩换个位置呢

Jstak 10-13 11:02:30
他的意思应该是希望cesium加载完成之后关闭loading,加载过程又是异步的，所以跟顺序应该关系不大，

Jstak 10-13 11:02:51
不过mars3d好像是有这个事件吧

Jstak 10-13 11:03:05
我昨天在vue3的模板好像是看到过实现方式的

不忍 10-13 11:03:20
不是cesium加载完成之后关闭loading

zz 10-13 11:04:03
loading要在cesium之前载入

不忍 10-13 11:04:23
是加载资源的时候，时间会久，所以加了一个loading，等vue资源请求完，app里的东西自然就没了。

不忍 10-13 11:04:44
http://82.156.162.96/web3d/#/

不忍 10-13 11:04:50
参照这个效果。

不忍 10-13 11:05:31
如果不改cesium的引入位置，loading是没啥大效果。

不忍 10-13 11:05:57
加载网站的时候就是白屏，这样不好。

zz 10-13 11:09:51
换一种引入loading得方式

zz 10-13 11:10:25
我用vite-plugin-html这个引入第三方库

SHMILY 10-13 11:11:54
@Jstak 

SHMILY 10-13 11:11:54
这样挂载上去?

SHMILY 10-13 11:11:54

 

zz 10-13 11:12:45
另一个项目没用vite-plugin-cesium插件，用得vite-plugin-html，可以控制文件引入的顺序

Jstak 10-13 11:13:26
「不忍：加载网站的时候就是白屏，这样不好。」
- - - - - - - - - - - - - - -
直接写在app里面就行了，vue挂载完成之后app中的内容就销毁了

Jstak 10-13 11:13:29

 

Jstak 10-13 11:14:10
「SHMILY：[图片]」
- - - - - - - - - - - - - - -
是的，返回的挂载对象中就有dom节点，拷贝一份作为模板

不忍10-13 11:15:38
「Jstak：[图片]」
- - - - - - - - - - - - - - -
你这个我试试。

Jstak 10-13 11:22:23
哦，vue2里面可以直接new Vue 挂载到createElement创建的对象上，这种确实要方便些，vue3应该也可以吧

Jstak 10-13 11:24:16
「SHMILY：这样挂载上去?」
- - - - - - - - - - - - - - -
对了，我想起来，这样挂载有个问题，你的vue环境就是单独的了，你没办法再用之前挂载的相关元素了

Jstak 10-13 11:24:56
「Jstak：对了，我想起来，这样挂载有个问题，你的vue环境就是单独的了，你没办法再用之前挂载的相关元素了」
- - - - - - - - - - - - - - -
@SHMILY 如果你只是一个单独的popup组件就无所谓，如果引用了全局组件就不行

繁星 10-13 11:27:57
场景操作一般是什么意思?

SHMILY 10-13 11:30:35
 不是这样嘛?

SHMILY 10-13 11:30:35

 

SHMILY 10-13 11:30:35

 

SHMILY 10-13 11:30:41
@Jstak 大佬

Jstak  10-13 11:32:53
你这个挂载方法会返回一个对象，对象里面就有dom元素，这个元素放到mars3d的popup 的html模板配置上

Jstak 10-13 11:32:53

Jstak 10-13 11:33:25
「SHMILY：[图片]」
- - - - - - - - - - - - - - -
你这个写一下就是普通的html，vue语法肯定没用的

SHMILY 10-13 11:33:30
哦哦

SHMILY 10-13 11:33:37
懂了

SHMILY  10-13 11:33:41
谢谢

Jstak 10-13 11:34:03
不客气

火星吴彦祖 10-13 11:35:00
defineCustomElement 可以创建自定义元素

火星吴彦祖 10-13 11:36:09

 

火星吴彦祖 10-13 11:36:16
也支持单文件组件的写法

Jstak 10-13 11:41:26
学到了，那这个是要方便很多，现在就去试试

Jstak  10-13 11:50:38
写到一半我就想起来了，这个我当时也看过，他是构建一个html的组件，好像获取不到dom元素

SHMILY  10-13 11:58:21
我还是没找到你说的DOM

SHMILY  10-13 11:59:27
@Jstak 大佬你再救我一次

Jstak  10-13 12:03:53
---- 干饭中 ----

一点尘埃  10-13 12:04:58
直接原生js方法单击多好

一个叫俊杰的男人  10-13 12:06:16
「Jstak：
写到一半我就想起来了，这个我当时也看过，他是构建一个html的组件，好像获取不到dom元素」
- - - - - - - - - - - - - - -
最后一行是注册自定义元素

一个叫俊杰的男人 10-13 12:06:27
直接当html用

Jstak 0-13 12:33:47
不行，defineCustomElement返回的时Element构造类

Jstak 10-13 12:33:47

 

Jstak 10-13 12:34:58

 

火星吴彦祖 10-13 12:36:15
注册自定义元素，截图中有。就是webcomponents

Jstak10-13 12:44:51
是的，我的意思就是webcomponents，但是没办法直接获取dom元素，我直接 new element()也不行

Jstak10-13 12:46:13
只是在html中注册了一个标签，可以直接使用

Jstak10-13 12:47:17
对啊，那我直接createElement应该就能构建dom对象了