自定义控件使用

一、为什么要使用自定义控件

• 控件种类有限，无法满足特定场景。

• 执行前端操作：系统的控件编程模型能够通过系统封装的各种控件代理对象，间接的访问、控制前端界面上的控件。而在自定义控件可以执行页面相关操作（特指服务器端无法处理的），比如点击按钮复制信息到系统粘贴板，在界面中调用JS代码实现。这样就可以达到服务端执行前端命令的效果。

二、开发与调试

• 可以使用vue、 或者javaScript开发

• 基本目录结构：
  

• 搭建脚手架：       下载链接地址

• 下载完毕后编写自己的vue控件  目录结构如下
  

• main.js解析

  基本生命周期：init  、 update、 destoryed

    // 注册自定义组件
    KDApi.register('customid', MyComponent, {
        isMulLang: true // 开启多语言
    })
    // 调用后端
    model.invoke('appid_copy_button', "xxx");
    
    // 后端需重写customEvent
    @Override
    public void customEvent(CustomEventArgs e) {
        super.customEvent(e);
        // 自定义控件标识
        String key = e.getKey();
        // 获取前端传过来的值
        String eventArgs = e.getEventArgs();
        String eventName = e.getEventName();
        if ("appid_copy_button".equals(eventName)) {
            this.getView().showSuccessNotification("复制成功");
        }
    }

• 调试运行

  1、安装依赖 npm install        2、打包  npm run dev        3、启动 nodemon server.js    

  4、在表单预览地址加上   &kdcus_cdn=http://localhost:3001    进行调试

  第三步的目的是  启动静态资源服务 如下图

        

可能会遇到的问题：

nodejs版本问题导致npm run dev 失败 ，  解决方法：

在script中加入 set NODE_OPTIONS=--openssl-legacy-provider && 

三、示例

    VUE示例 具体文件在附件里：

    复制功能：        

(function (KDApi, $) {
    function MyComponent(model) {
        this._setModel(model)
    }
    MyComponent.prototype = {
        _setModel: function (model) {
            this.model = model
        },
        init: function (props) {
        },
        update: function (props) {
            console.log("正在粘贴")
            copy_to_clipboard(this.model, props);
        },
        destoryed: function () {
        }
    }
    var copy_to_clipboard = function (model, props) {
        //$(model.dom).find('button').click(function(){
        //button按钮对象
        var copyInput = document.createElement("input");
        copyInput.type = "text";
        copyInput.value = props.data.copystr;
        document.body.appendChild(copyInput);
        copyInput.select();
        // 执行浏览器复制命令
        document.execCommand('Copy');
        document.body.removeChild(copyInput);
        model.invoke('appid_copy_button', "xxx");
    }
    KDApi.register('appid_copy_button', MyComponent);
})(window.KDApi, jQuery)

update中调用，每当更新时通过invoke调用后端逻辑进行页面‘复制成功’提醒

@Override
public void customEvent (CustomEventArgs e) {
    super.customEvent(e);
    // 自定义控件标识
    String key = e.getKey();
    // 获取前端传过来的值
    String eventArgs = e.getEventArgs();
    String eventName = e.getEventName();
    if ("appid_copy_button".equals(eventName)) {
        this.getView().showSuccessNotification("复制成功");
    }
}

如何出发update呢？  可以在页面设置一个按钮点击按钮给该自定义控件传递要复制的数据并触发 。

*注意   如果要每次点击复制都触发，可以传递一个随机id，保证点击按钮每次传递值都不同进行触发。

// 操作自定义控件
CustomControl customControl = getControl("yfsw_customcopy");
Map<String, Object> paramsMap = new HashMap<>();
paramsMap.put("copystr", stringBuffer.toString());
paramsMap.put("random", ID.genLongId());
customControl.setData(paramsMap);

以上为个人观点、欢迎探讨！