自定义控件结合Vue开发教程
# 1、使用场景
苍穹平台为了满足特殊或者个性化需求提供了自定义控件来扩展平台控件,自定义控件支持原生js、jQuery、Vue、React。使用原生js或者jQuery来开发的原理是操作Dom元素,这种方式代码量多,逻辑复杂,使用Vue可以减少冗余代码,提高开发效率,本文将介绍自定义控件结合Vue开发的步骤,简化前端的开发过程
# 2、操作步骤
下载苍穹提供的Vue工程文件,此工程文件设置了打包的相关信息,提供了相关版本的依赖包。
项目目录结构:
![image.webp](/download/0100d32d252000e54928ad8357c520e3f9a6.webp)
## 2.1 开发
build文件夹内的custom.configInfo.js存放控件方案相关内容,按照自定义控件内控件方案填写
![image.webp](/download/010002f405844c6b4cfdaa5c17af5b8c0e3f.webp)
![image.webp](/download/0100ebec50b393af44439e691e7b00ca4691.webp)
JS文件放在vue_stage\src\web\isv\开发商标识\领域id\项目名称\css内
Vue组件放在vue_stage\src\web\isv\开发商标识\领域id\项目名称\components内
vue_stage\src\web\isv\开发商标识\领域id\项目名称\main.js是程序的入口,需要在此处注册组件以及接收后端的数据
![image.webp](/download/01009d90ef2900e741de87c56e2b205df365.webp)
register的第一个参数是自定义组件的名称,需要与控件方案内的方案id、打包后的文件名称一致。
我们在main.js通过import引入Vue库和自己写的Vue组件库,这里我将TodoList的组件名称改为App.vue,就是我们熟悉的普通Vue项目了
![image.webp](/download/01004d729618b1814b268b2f14881bad3744.webp)
后端传来的数据存放于props,我们需要将props设置为全局变量来在别的组件内使用。
![image.webp](/download/0100d6478a2a2afe4256a108533a5e97bf1e.webp)到这里,我们可以成功接收到后端传来的数据进行前端的开发
自定义控件结合Vue开发教程
# 1、使用场景苍穹平台为了满足特殊或者个性化需求提供了自定义控件来扩展平台控件,自定义控件支持原生js、jQuery、Vue、React。使用原生...
点击下载文档
上一篇:去除请选择要执行的数据的提示语下一篇:F7已选列表控件的使用
本文2024-09-16 17:46:34发表“云星空知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-k3cloud-17857.html
您需要登录后才可以发表评论, 登录登录 或者 注册
最新文档
热门文章