在O2OA门户页面中使用Vue非常容易,本章我们介绍两个实例,来展示如何在门户页面中使用Vue。
版本要求
本文适用于如下版本:
- O2OA版本要求:5.1及以上版本;
- Vue版本:本文撰写时,Vue版本是2.6.11。(更低的版本未经验证)
实例一、HelloWord
在O2OA门户应用中创建一个页面,并向页面中创建一个文本组件,名称为“label”,值设置为“固定值”:{{message}}。如下图:
然后再表单的afterload事件中,输入以下代码:
//引入vue脚本,生产环境使用https://cdn.jsdelivr.net/npm/vue //你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它 o2.load("https://cdn.jsdelivr.net/npm/vue/dist/vue.js", function () { o2.load([js1,js2,js3], function(){ }); new Vue({ el: this.page.get("label").node, data: { message: 'Hello O2OA with Vue !' } }); }.bind(this));
保存页面后,并预览此页面:
这样我们就在O2OA门户页面中使用了Vue。
实例二、O2 Task List
本列我们实现与前面章节中,集成React样例中一样的功能:列示当前用户的前20条待办,点击标题打开待办;并通过点击按钮启动流程和打开主页。
新建页面
在O2OA门户应用中新建一个页面,并向页面中创建一个容器组件,标识为:div。然后在容器中创建一个通用元素,元素标签为o2-task。我们会在后面创建o2-task的Vue组件。
在页面基本属性的CSS添加如下CSS代码:
.App { padding: 20px; margin: 20px; } .App-header { padding: 5px 10px; background: #0f81cc; font-size: 18px; color: #ffffff; } .o2-tasklist { padding: 10px; background: #f3f3f3; font-size: 18px; } .o2-task { line-height: 20px; height: 20px; cursor: pointer; } .o2-button { padding: 10px 20px; text-align: center; background: #0f81cc; margin-top: 10px; color: #ffffff; font-size: 18px; float: left; margin-right: 20px; cursor: pointer; }
创建Vue组件
在门户中创建一个脚本,命名为:vue_task,并输入以下代码:
上述代码实现了一个Vue组件,并挂载到页面的容器div上。代码中有简单注释,请参考Vue官方文档。
在页面中引入脚本库
在页面的afterload事件中,添加以下代码:
this.include("vue_task"); this.include(["11","22"], function(){}, true);
预览查看结果
预览当前页面,就可以看到如下效果:
到此我们我们在O2OA门户中使用了Vue创建了我们需要的组件,并调用它,可见这是非常容易的。直接应用Vue的js文件也是Vue官方推荐的使用方式。
Vue还提供了官方Vue-CLI工具,用于在Node.Js开发环境下的快速构建,下一章,我们就来介绍通过Vue-CLI创建Vue应用并集成O2OA