找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 葡萄城技术博客 › 查看内容
发新帖

葡萄城花卷

超级版主

97

主题

104

帖子

739

积分

超级版主

Rank: 8Rank: 8

积分
739

微信认证勋章讲师达人元老葡萄圣诞拼拼乐

最新发帖

[前端] 灵光一闪！帮你使用Vue，搞定无法解决的“动态挂载”

葡萄城花卷
超级版主   /  发表于：2021-11-12 15:44  /   查看：3134  /  回复：0
本帖最后由 葡萄城花卷 于 2021-11-15 11:19 编辑

在一些特殊场景下，使用组件的时机无法确定，或者无法在Vue的template中确定要我们要使用的组件，这时就需要动态的挂载组件，或者使用运行时编译动态创建组件并挂载。
今天我们将带大家从实际项目出发，看看在实际解决客户问题时，如何将组件进行动态挂载，并为大家展示一个完整的解决动态挂载问题过程。

image.png223148497.png

无法解决的“动态挂载“
我们的电子表格控件SpreadJS在运行时，存在这样一个功能：当用户双击单元格会显示一个输入框用于编辑单元格的内容，用户可以根据需求按照自定义单元格类型的规范自定义输入框的形式，集成任何Form表单输入类型。

这个输入框的创建销毁都是通过继承单元格类型对应方法实现的，因此这里就存在一个问题——这个动态的创建方式并不能简单在VUE template中配置，然后直接使用。

image.png345297240.png

而就在前不久，客户问然询问我：你家控件的自定义单元格是否支持Vue组件比如ElementUI的AutoComplete？
由于前面提到的这个问题：
1636700871(1).png267288817.png
沉思许久，我认真给客户回复：“组件运行生命周期不一致，用不了”，但又话锋一转，表示可以使用通用组件解决这个问题。

问题呢，是顺利解决了。

但是这个无奈的“用不了“，却也成为我这几天午夜梦回跨不去的坎。
image.png705278014.png

后来，某天看Vue文档时，我想到App是运行时挂载到#app上的。从理论上来说，其他组件也应该能动态挂载到需要的Dom上，这样创建时机的问题不就解决了嘛！
正式开启动态挂载
让我们继续查看文档，全局APIVue.extend( options ) 是通过extend创建的。Vue实例可以使用$mount方法直接挂载到DOM元素上——这正是我们需要的。
  1. <div id="mount-point"></div>

  3. // 创建构造器
  4. var Profile = Vue.extend({
  5.   template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  6.   data: function () {
  7.     return {
  8.       firstName: 'Walter',
  9.       lastName: 'White',
  10.       alias: 'Heisenberg'
  11.     }
  12.   }
  13. })
  14. // 创建 Profile 实例，并挂载到一个元素上。
  15. new Profile().$mount('#mount-point')
复制代码
按照SpreadJS自定义单元格示例创建AutoCompleteCellType，并设置到单元格中：
  1. function AutoComplateCellType() {
  2. }
  3. AutoComplateCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
  4. AutoComplateCellType.prototype.createEditorElement = function (context, cellWrapperElement) {
  5. //   cellWrapperElement.setAttribute("gcUIElement", "gcEditingInput");
  6.   cellWrapperElement.style.overflow = 'visible'
  7.   let editorContext = document.createElement("div")
  8.   editorContext.setAttribute("gcUIElement", "gcEditingInput");
  9.   let editor = document.createElement("div");
  10.   // 自定义单元格中editorContext作为容器，需要在创建一个child用于挂载，不能直接挂载到editorContext上
  11.   editorContext.appendChild(editor);
  12.   return editorContext;
  13. }
  14. AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
  15.     let width = cellRect.width > 180 ? cellRect.width : 180;
  16.     if (editorContext) {
  17.       // 创建构造器
  18.       var Profile = Vue.extend({
  19.         template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  20.         data: function () {
  21.           return {
  22.             firstName: 'Walter',
  23.             lastName: 'White',
  24.             alias: 'Heisenberg'
  25.           }
  26.         }
  27.       })
  28.       // 创建 Profile 实例，并挂载到一个元素上。
  29.       new Profile().$mount(editorContext.firstChild);
  30.     }
  31. };
复制代码
运行，双击进入编辑状态，结果却发现报错了
[Vue warn]: You are using theruntime-only build of Vue where the template compiler is not available. Eitherpre-compile the templates into render functions, or use the compiler-includedbuild.

根据报错提示，此时我们有两种解决办法：

  • 开启runtimeCompiler，在vue.config.js中加入runtimeCompiler: true的配置，允许运行时编译，这样可以动态生成template，满足动态组件的需求
  • 提前编译模板仅动态挂载，autocomplete的组件是确定的，我们可以使用这种方法


新建AutoComplete.vue组件用于动态挂载，这样可以挂载编译好的组件。
  1. <template>
  2.   <div>
  3.     <p>{{ firstName }} {{ lastName }} aka {{ alias }}</p>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   data: function () {
  9.     return {
  10.       firstName: "Walter",
  11.       lastName: "White",
  12.       alias: "Heisenberg",
  13.     };
  14.   },
  15. };
  16. </script>


  19. import AutoComplate from './AutoComplate.vue'


  22. AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
  23.     let width = cellRect.width > 180 ? cellRect.width : 180;
  24.     if (editorContext) {
  25.       // 创建构造器
  26.       var Profile = Vue.extend(AutoComplate);
  27.       // 创建 Profile 实例，并挂载到一个元素上。
  28.       new Profile().$mount(editorContext.firstChild);
  29.     }
  30. };
复制代码
双击进入编辑状态，看到组件中的内容
image.png306051329.png

下一步，对于自定义单元格还需要设置和获取组件中的编辑内容，这时通过给组件添加props，同时在挂载时创建的VueComponent实例上直接获取到所有props内容，对应操作即可实现数据获取设置。


更新AutoComplate.vue，添加props，增加input用于编辑
  1. <template>
  2.   <div>
  3.     <p>{{ firstName }} {{ lastName }} aka {{ alias }}</p>
  4.     <input type="text" v-model="value">
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.   props:["value"],
  10.   data: function () {
  11.     return {
  12.       firstName: "Walter",
  13.       lastName: "White",
  14.       alias: "Heisenberg",
  15.     };
  16.   },
  17. };
  18. </script>

复制代码
通过this.vm存储VueComponent实例，在getEditorValue 和setEditorValue 方法中获取和给VUE组件设置Value。编辑结束，通过调用$destroy()方法销毁动态创建的组件。
  1. AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
  2.     let width = cellRect.width > 180 ? cellRect.width : 180;
  3.     if (editorContext) {
  4.       // 创建构造器
  5.       var Profile = Vue.extend(MyInput);
  6.       // 创建 Profile 实例，并挂载到一个元素上。
  7.       this.vm = new Profile().$mount(editorContext.firstChild);
  8.     }
  9. };

  11. AutoComplateCellType.prototype.getEditorValue = function (editorContext) {
  12.     // 设置组件默认值
  13.     if (this.vm) {
  14.         return this.vm.value;
  15.     }
  16. };
  17. AutoComplateCellType.prototype.setEditorValue = function (editorContext, value) {
  18.     // 获取组件编辑后的值
  19.     if (editorContext) {
  20.       this.vm.value = value;
  21.     }
  22. };
  23. AutoComplateCellType.prototype.deactivateEditor = function (editorContext, context) {
  24.     // 销毁组件
  25.     this.vm.$destroy();
  26.     this.vm = undefined;
  27. };
复制代码
image.png967491455.png

整个流程跑通了，下来只需要在AutoComplate.vue中，将input替换成ElementUI 的el- autocomplete并实现对应方法就好了。
结果
让我们看看效果吧。

image.png60847472.png
其实动态挂载并不是什么复杂操作，理解了Vue示例，通过vm来操作实例，灵活的运用动态挂载或者运行时编译的组件就不是什么难事了。


其实一切的解决方案就在Vue教程入门教程中，但是脚手架的使用和各种工具的使用让我们忘记了Vue的初心，反而把简单问题复杂化了。
image.png308921508.png

今天的分享到这里就结束啦，后续还会为大家带来更多严肃和有趣的内容~

你有什么在开发中“忘记初心“的事情吗？







SpreadJS | 下载试用
纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。
如下资源列表，可以为您评估产品提供帮助：


0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部