GithubHelp home page GithubHelp logo

kchengz / k-form-design Goto Github PK

View Code? Open in Web Editor NEW
1.2K 35.0 302.0 33.76 MB

基于vue Ant-Design 的表单设计器，快速开发

License: MIT License

JavaScript 15.21% HTML 16.75% Vue 54.33% CSS 3.99% Less 9.72%

k-form-design's Issues

vue 3.0 兼容问题

目前引入的 在vue 3.0 中会有严重的 兼容性的问题
，下一步是什么时候兼容啊

求助帖

楼主，请教个问题：
有没有办法把模板语法写成的控件vue文件存入数据库中，然后根据拖拽回来 在前端完成渲染和 展示
谢谢

树形选择器怎么赋值？

树形选择器怎么赋值？从后台得到一个数组 arr，这个值怎么赋给树形选择器？
把arr赋值给动态数据变量名看不到数据。

关于k-form-design 4.x开发讨论及建议

关于k-form-design 4.x开发讨论及建议

  1. 使用vue3 Typescript进行项目重构
  2. 增加表单关联功能
  3. 增加编辑撤回功能
  4. ......

如果您有其他建议，请留言

层级显示问题

用iview 的modal显示时 点击预览、生成JSON等 弹出的窗口在iview的modal下面 需要将iview的modal关闭才能显示 能否有办法解决
image

k-form-design.umd.js 中有一行代码与Monaco-editor发生事件注册冲突

背景

使用k-form-design的同时，我在项目中以Monaco-editor作为SQL语句的编辑器，在收集k-form-build的数据之后触发SQL增强来达到我使用表单编辑器的目的。
但是在昨天，我准备将完成的功能整合时，发现Monaco-editor的mouseEnter、mouseMove、mouseLeave均在抛出异常，排查一段时间后发现系由引入的k-form-design.umd.js中的有对这三个事件做了一定的处理后导致的异常。

有问题的代码

!function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var o={};t.m=e,t.c=o,t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,o){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=o(1),u={passive:!0,capture:!1},i=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"],s=function(e,t){return void 0!==e?e:-1!==i.indexOf(t)&&u.passive},c=function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e};if((0,r.eventListenerOptionsSupported)()){var p=EventTarget.prototype.addEventListener;!function(e){EventTarget.prototype.addEventListener=function(t,o,r){var i="object"===(void 0===r?"undefined":n(r))&&null!==r,p=i?r.capture:r;r=i?c(r):{},r.passive=s(r.passive,t),r.capture=void 0===p?u.capture:p,e.call(this,t,o,r)},EventTarget.prototype.addEventListener._original=e}(p)}},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.eventListenerOptionsSupported=function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}}]);

由于k-form-design.umd.js存在一定程度的压缩代码的关系，这种问题出现了是真的不好找，我几度想放弃。不过由于是周末，房间也正在喊人收拾，就闲着蛋疼搜事件注册的地方一个个看了。

该行代码位于文件的第9614行，应该是作者借鉴的vue-form-making的代码

如何监听select等控件的search事件

select开启“可搜索”后，希望根据input框中输入的关键字实时去后端查询
ant-design-vue官网样例是监听search事件，请问应该如何操作？

建议单独提供kFormDesign get json与reset json的API

获取数据

在文档中，我并未看到如何获取kFormDesign的json数据，查看源码后发现并没有提供相关API。

handleSave: function handleSave() {
      // 保存函数
      this.$emit("save", JSON.stringify(this.data));
}

也就是说需要使用refs的方式去获取实例的data来达到我的目的，建议提供getValue方法。

getValue() {
      return this.data
}

重置KFormDesign

在调用handleReset时，我发现会出现一个弹窗，而这个恰好是我不需要的。

handleReset: function handleReset() {
    var _this3 = this;

    // 清空
    this.$confirm({
            title: "警告",
            content: "是否确认清空内容?",
            okText: "是",
            okType: "danger",
            cancelText: "否",
            onOk: function onOk() {
                _this3.data.list = [];

                _this3.handleSetSelectItem({
                key: ""
                });

                _this3.$message.success("已清空");
    		}
    });
},

建议单独对外提供一个不含弹窗的reset方法

resetKformDesign() {
	this.data.list = [];
    this.handleSetSelectItem({
    	key: ""
    });
}

select点击清除按钮后报错

版本号：3.7.75
问题：配置json中select配置成可清除，在k-form-build中使用后，点击页面上select框右侧的清除按钮报错
错误代码如下

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'target' of undefined"

found in

---> <ASelect>
       <ACol>
         <ARow>
           <AFormItem>
             <KFormItem>
               <BuildBlocks>
                 <AForm>
                   <ALocaleProvider>
                     <LocaleReceiver>
                       <AConfigProvider>
                         <KFormBuild>
                           <PermissionForm>
                             <Anonymous>
                               <Anonymous>
                                 <Portal>
                                   <PortalWrapper>
                                     <Anonymous>
                                       <AModal>

TypeError: Cannot read property 'target' of undefined
    at VueComponent.handleChange (k-form-design.umd.min.js?568e:308)
    at Object.change (k-form-design.umd.min.js?568e:308)
    at Object.keys.forEach.u.<computed> (k-form-design.umd.min.js?568e:308)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at VueComponent.invoker (vue.esm.js?a026:2188)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at VueComponent.Vue.$emit (vue.esm.js?a026:3897)
    at VueComponent.fireChange (k-form-design.umd.min.js?568e:308)
    at VueComponent.onClearSelection (k-form-design.umd.min.js?568e:308)
    at eval (k-form-design.umd.min.js?568e:185)

集成源码报错

This dependency was not found:

  • default-passive-events in ./src/components/k-form-design/packages/mini.js

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.