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对象了
Mars3d的html 模板中使用element-ui 组件参考相关推荐
- php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
- Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
- Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- vue3 中使用antd UI组件
之前搞pc端的 会使用element的ui组件 现在 vue3 来了 顺便也更新试用下 vuu3中的ui组件 不过好像 element还没更新支持 vue3 所以先用antd 来试试看 1. ...
- Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
- 解决vue-admin-template插件element UI组件默认英文改中文
其实vue-admin-template这个框架原来就有的 1.element UI里的组件改中文模式如图: src/main.js: 2.第三方插件如tinymic这个富文本插件改成中文显示,上面方 ...
- uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版
文章目录 第一步,HBuilder X中新建一个uni-app的项目 第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd ...
- mpvue项目中使用第三方UI组件库
原文链接 最新声明 本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用.希望大家参考其他更新的文章~ 简介 微信小程序上线已有一年多时间啦,自美团的mp ...
最新文章
- 数字图像处理及MATLAB实现实验五——图像增强
- spring源码分析之cache demo
- ElementUI中弹窗使用textarea原样显示SpringBoot后台带换行的StringBuilder内容
- tensorflow gpu利用率低_「动手学习Tensorflow」- Tensorflow综述I
- 如何把VS Code打造成Java开发IDE？
- esc键没反应_有机人名反应——Brown 硼氢化反应（Brown Hydroboration）
- 数据库半年回顾：国外波澜不惊，国内势如破竹
- 创造与魔法241服务器系统什么时候修好,《创造与魔法》数据互通,交流不愁 4月27日更新维护公告...
- 1112个人赛，最长回文串常见算法讨论
- 手机端仿ios的银行下拉脚本五
- Javascript：使用js将数据导出到excel/csv
- Next主题美化博客
- Netapp存储搬迁
- 外卖联盟高级API - 怎么让小程序跳转到美团小程序领红包并下单
- 计算机音乐谱生曰快乐,原神乐谱（琴谱）生日快乐
- 分析mrp主要应用范围_MRP适用于相关需求的计划与控制
- bk-02 C++ vector用法 博客园
- 月入2万的10个小生意项目
- 微信聊天功能测试用例设计
- LCAC第十六次会议重要内容摘取 与 LCAC003号提案公示
热门文章
- 关于解决Photoshop CS5打开后出现已停止工作强制退出的问题
- Day44-45_Hive高级
- poi设置word表格单元格宽度_java poi 设置word 格式如表格一类的
- Linux/Deepin 系统简单安装 Photoshop CS6 教程，附安装包
- 罗杰斯：不看好房地产股票 最佳投资是大宗商品
- DOSBox0.74的显示大小问题（调整分辨率）
- element tab如何居中_如何用思维导图提高工作效率
- 南大计算机博士黄鑫,南京大学软件学院张贺教授团队在经验软件工程方法学研究中取得重要成果...
- 解决Linux上steam更新游戏后导致版本不一致连接失败的问题
- App inventor 写的垃圾分类小助手（一）