GithubHelp home page GithubHelp logo

kchengz / k-form-design Goto Github PK

View Code? Open in Web Editor NEW
1.2K 1.2K 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 People

Contributors

457900427 avatar asteroid77 avatar ayufeng avatar callcter avatar chenyangchi avatar dependabot[bot] avatar dinert avatar gaoliang avatar kchengz avatar lizhibin7530 avatar maqzh avatar onedayonestep avatar woai3c avatar yjzfun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

k-form-design's Issues

层级显示问题

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

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

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

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

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

集成源码报错

This dependency was not found:

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

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

背景

使用k-form-design的同时,我在项目中以Monaco-editor作为SQL语句的编辑器,在收集k-form-build的数据之后触发SQL增强来达到我使用表单编辑器的目的。
但是在昨天,我准备将完成的功能整合时,发现Monaco-editormouseEntermouseMovemouseLeave均在抛出异常,排查一段时间后发现系由引入的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的代码

vue 3.0 兼容问题

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

求助帖

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

树形选择器怎么赋值?

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

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)

如何监听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: ""
    });
}

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.