自定义控件-引入第三方js，vue框架引入

pc端的自定义控件自带jquery，移动端的自定义控件不带任何框架。

在开发pc端时，可以引入除了jquery之外的其他框架；在开发移动端时，除了用原生js开发，开可以引入vue框架。

引入vue框架

进入【系统服务云】【系统管理】

下载模板后修改index.js，index_m.js文件

index.js:

(function(){
     var script = document.createElement('script');
     script.src = 'isv/kdec/globalfiles/vue.min.js';
     var head = document.getElementsByTagName("head")[0];
     head.appendChild(script);
 
})();

index_m.js

(function(){
     var scriptVue = document.createElement('script');
     scriptVue.src = 'isv/kdec/globalfiles/vue.min.js';

     var scriptJQuery = document.createElement('script');
     //script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
     scriptJQuery.src = 'isv/kdec/globalfiles/jquery-3.6.0.min.js';

     var head = document.getElementsByTagName("head")[0];
     head.appendChild(scriptVue);
     head.appendChild(scriptJQuery);
})();

jquery.js文件和vue.js自行百度搜索下载，或者在本文章的附件中下载。

一共有这些文件

修改完成之后，再打包成zip上传

整体步骤和异常问题，参考我的其他文章

https://vip.kingdee.com/article/289100335099226368?productLineId=29

编写使用vue的自定义控件

编写自定义控件的 index.js文件，代码如下

(function(KDApi, $) {
    // 构造函数，变量名随意，与最后一句代码的KDApi.register的第二个参数一致即可
    function MyComponent(model) {
        this._setModel(model)
    }

    // 原型中封装生命周期函数，固定格式
    MyComponent.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props) {
            // TO DO
            initEvent(this.model, props)
        },
        update: function(props) {
            // TO DO
            refresh()
        },
        destoryed: function() {
            // TO DO
        }
    }

    var initEvent = function(model,props) {
        let template = `<div id="edittext">
            <p>{{ message }}</p>
            <input v-model="message">
        </div>`;
        new Vue({
            el: model.dom,
            template,
            data: {
              message: 'Hello World!'
            }
        })
    }

    var refresh = function() {
    }


    // KDApi注册一个id号，这个id号要和控件方案的id号对应
    KDApi.register('vuetext', MyComponent)
})(window.KDApi, jQuery)

打包成zip包，上传至控件方案：

调整自定义控件样式

效果图

新窗口打开，按f12进入调试模式

发现引入了vue.min.js文件，证明vue框架引入成功。

附件

引入vue框架的扩展文件globalifiles.zip已上传。

控件方案，vuetext.zip已上传。