dream2023 / f-render Goto Github PK

问题描述 ： 批量添加的input属性配置会错乱
批量添加生成的input 会 把拖拽生产的input的表单项属性配置 覆盖 （错乱）

问题复现步骤：

1. 先拖拽一个input放入展示中
   2.点击批量添加 添加方式， 逐个新增 表单项 ：1 ，label：1 ，选择type：input 点击提交
   3.此刻 批量添加生产的input 的 属性配置会显示 第一个拖拽生成input的配置 依次都会错乱
   
   
   
   
   
   麻烦大佬有时间可以解决一下 谢谢了

IE10下出现白屏 控制台下报错
Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11

请问着段代码是在那里引用的 是否有替代方案？

支持vue3吗？

有的项目是用electron，可以直接利用electron API选择本地图片使用，而不需要上传行为。

虽然可以参考文档自定义组件，但是没法利用vue-ele-form-generator产生文件列表的schema，挺不方便的。

现在默认是6，可否自定义，现有layout，只在小屏下有效

譬如只能输入四位小数等，能否添加自定义校验功能，自己规定正则表达式得形式。

你好! 是否可以考虑实现 <el-row> 行容器这个东西, 或者是把<el-row> 也单独封装成一个组件, 比如现在需要布一个这个样子的局, 就是一行和另一行不对齐的情况:

+--------+-------+
| 输入框  |       |
+--------+       |
| 输入框  | 图片框 |
+--------+       |
| 输入框  |       |
+--------+-------+

假设这里的输入框和图片框的宽度都是 12, 现在使用 #10 中给出的解决方法, 使用 layout 控制宽度的话会变成这样:

+--------+-------+
| 输入框  |       |
+--------+       |
         | 图片框 |
         |       |
         |       |
+--------+-------+
| 输入框  | 输入框 |
+--------+-------+

如果用行容器这种模式的话可以变成是一行, 左右各有一个宽 12 的行容器, 左边的行容器里有 3 个输入框, 每个宽度都是 24, 右边的是一个图片框, 这样的话正好两边就是一样高的, 最后生成的代码应该类似这样:

<row>
    <row span="12">
        <input />
        <input />
        <input />
    </row>
    
    <row span="12">
        <image/>
    </row>
</row>

第二个图那个错位的布局使用的 formDesc:

{
  key_1587437729999: {
    label: "单行输入框",
    type: "input",
    layout: 12
  },
  key_1587437739302: {
    label: "上传图片",
    type: "image-uploader",
    attrs: {
      fileType: [],
      action: "https:\u002F\u002Fwww.mocky.io\u002Fv2\u002F5cc8019d300000980a055e76"
    },
    layout: 12
  },
  key_1587437746662: {
    label: "单行输入框",
    type: "input",
    layout: 12
  },
  key_1587437760580: {
    label: "单行输入框",
    type: "input",
    layout: 12
  }
}

项目一开始的时候，没有用element ui ，刚开始还没开始写前端，现在项目中期了，没法改，请问作者有iview ui 版本没有？

Feature request（新功能建议）

隔壁的 avue-form-design 有个布局功能很赞，建议吸收进来，能很好的将表单分区，视觉上更加清晰。

操系统版本：
CentOS Linux release 7.0.1406 (Core)
复现步骤：
[root@Template vue-ele-form-generator]# fgen -p 8888
Running at http://localhost:8888
[root@Template ~]# curl http://localhost:8888

场景一
有两个组件， 是否组件和input组件
如果选择是，则input 可以编辑，否则 反之；

场景二
有两个组件， 是否组件和单选组件
如果选择是，则单选组件的选项用A数据源，否这用B数据源

可以分享一下你的思路吗

表单项字段更改之后，原来的资源在formData中没有删除

Bug report（问题描述）

f-render 的 select 组件的 options 属性无法指定 url，参考文档options讲解 ，配置了 :options-fn 后然后设置 options 表单设计器直接报错。

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原 demo）

Other relevant information（格外信息）

• Vue version:
• f-render version:4.5.0
• ElementUI version:2.13.2
• vue-ele-form version:0.8.35

不用界面要选择那么多，可以用接口生成大部分代码，再细微的改动就可以了

Hi there,

your repo look really interesting. Maybe you could add an englisch translation?

Best regards,
Berti

创建多个字段，给一个字段添加规则，剩余字段也会被添加上一样的规则
删除一个规则配置，其他字段也会被删除规则配置

我按着文档安装 完成打开页面 提示我 Maximum call stack size exceeded （超出了最大调用堆栈大小）

应该生成：

<template>
  <ele-form-dialog
    :formDesc="formDesc"
    v-model="formData"
    :request-fn="handleRequest"
    @request-success="handleRequestSuccess"
    :visible.sync="dialogFormVisible"
  ></ele-form-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      formData: {},
      formDesc: {
        name: {
          label: "单行输入框",
          type: "input",
          attrs: {
            placeholder: "请输入分类名称"
          },
          required: true,
          tip: ""
        }
      }
    }
  },
  methods: {
    handleRequest (data) {
      console.log(data)
      return Promise.resolve()
    },
    handleRequestSuccess () {
      this.$message.success('发送成功')
    }
  }
}
</script>

现在生成：

<template>
  // 应该在接口改动之后网页端忘记改了
  <ele-form
    :isDialog="true"
    :formDesc="formDesc"
    v-model="formData"
    :request-fn="handleRequest"
    @request-success="handleRequestSuccess"
  ></ele-form>
</template>

<script>
export default {
  data () {
    return {
      formData: {},
      formDesc: {
        name: {
          label: "单行输入框",
          type: "input",
          attrs: {
            placeholder: "请输入分类名称"
          },
          required: true,
          tip: ""
        }
      }
    }
  },
  methods: {
    handleRequest (data) {
      console.log(data)
      return Promise.resolve()
    },
    handleRequestSuccess () {
      this.$message.success('发送成功')
    }
  }
}
</script>

麻烦请教下，这种后台一般是怎么储存的

批量添加表单时，modal在点击其他地方时自动消失了，有时误触，弹窗关闭了，且没有保存之前的数据。

类似这样：https://json-editor.github.io/json-editor/

formDesc: {
btn: {
label: '自定义',
type: 'button',
title: '按钮文字', // 按钮文字内容
// 或者 title: '按钮文字'
on: {
// 按钮事件触发
click () {
console.log('clicked')
// 这边如何获取 formdata 的值
}
}
}
}

我看到表单设计器的组件通用配置写明options支持API接口、数组、函数、Promise等,但是未看到如何配置及使用，json-editor只支持Array与Object。

可否简略说明。感谢！

把基础的验证 还有可以输入正则的验证加上就好了

如题

上面四个每个宽度为6，再拖一个宽度为6的组件，跑到最右边去了，期望应该是左边开始。如果能有行的概念就好了 现在是列，列高度比其他的列高就会出现这个问题。望作者大大解决一下，之前提过的。

就是表单可以加背景颜色，或者图片的功能

版本信息

• vue:2.6.1
• vue-ele-form: 0.8.25

我的代码

<template>
  <div class="home">
    <ele-form
      :formDesc="formDesc"
      v-model="formData"
      :request-fn="handleRequest"
      @request-success="handleRequestSuccess"
    ></ele-form>
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class Home extends Vue {
    formData = {}
    formDesc = {
      account: {
        label: "账户名称",
        type: "input",
        required: true
      },
      icon: {
        label: "上传图标",
        type: "image-uploader",
        attrs: {
          name: "dsdsds",
          drag: true,
          fileType: [],
          action: "https:\u002F\u002Fwww.mocky.io\u002Fv2\u002F5cc8019d300000980a055e76"
        }
      },
    }
    
    handleRequest (data: string) {
      console.log(data)
      return Promise.resolve()
    }
    handleRequestSuccess () {
      this.$message.success('发送成功')
    }
}
</script>

报错

配置el-input-number联动，作者线上环境直接卡死，开发环境，报错
代码：

{
  "formDesc": {
    "key_1594776474600": {
      "options": [
        {
          "text": "选项1",
          "value": 1
        },
        {
          "text": "选项2",
          "value": 2
        },
        {
          "text": "选项3",
          "value": 3
        }
      ],
      "label": "选择器",
      "type": "select"
    },
    "key_1594776729232": {
      "label": "数字",
      "type": "number",
      "attrs": {
        "min": 2,
        "max": 11
      },
      "default": 0,
        "vif":(data) => data.key_1594776474600 == 1
    }
  }
}

开发环境报错如下：

在设计器里怎么扩展布局控件？

Bug report（问题描述）

比如添加2个单行输入框，改动其中一个输入框的placeholder属性后，另一输入框的placeholder属性也会跟着变动。该问题只出现在创建表单的时候，更新表单无该问题。

Steps to reproduce（问题复现步骤）

1. 添加2个单行输入框
2. 修改其中1个输入框的placeholder属性

Other relevant information（格外信息）

• Vue version: 2.6.10
• f-render version: 4.12.1
• ElementUI version: 2.13.2
• vue-ele-form version: 0.8.53

Question（提问）

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原 demo）

Other relevant information（格外信息）

• Vue version:
• f-render version:
• ElementUI version:
• vue-ele-form version:

表单验证是不是可以控制右上角的提示

import comps from "f-render/fixtures/comps";
// 富文本配置
import quillEditor from "f-render/fixtures/extends/quill-editor";
富文本属性配置报错

These dependencies were not found:

• f-render/fixtures/comps in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FormDesign.vue?vue&type=script&lang=js&
• f-render/fixtures/extends/quill-editor in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FormDesign.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save f-render/fixtures/comps f-render/fixtures/extends/quill-editor

运行npm install --save f-render/fixtures/comps f-render/fixtures/extends/quill-editor也不行

您好，可视化表单设计器有没有事件绑定相关的操作，比如两个组件联动 交互？我看ele-from有，二次开发的话可以指点下吗

https://dream2023.github.io/form/

代码里面并没有组件数据

发现一个小bug，输入英文数字不换行，css需要改下，哈哈

生成的表单如何在vue2项目中使用？

1 function 使用场景比较多。功能比较强大。需要支持
2. 建议不用eval ，相关原因 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval

//更好的代码

function looseJsonParse(obj){
    return Function('"use strict";return (' + obj + ')')();
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

现在项目一般只做pc端的需求比较少，很多时候都要跨端，需要做成自适应的网页。希望项目能支持移动端的预览调试。

感谢作者🙏

Bug report（问题描述）

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原 demo）

Other relevant information（格外信息）

• Vue version:2.6.10
• f-render version:4.12.3
• ElementUI version:2.13.2
• vue-ele-form version:0.8.56