jjzjj

form-create-designer-naiveui

sw-code 2023-11-23 原文

这个是 Vue3 版本

form-create-designer-naiveui 是基于 @form-create/naive-ui vue3版本实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

form-create-designer 是基于 @form-create/element-ui 开发的表单设计器，本项目更换原项目的UI框架为 Naive UI ，做出的更改如下：

  • Element Plus v2.0.1 -> Naive UI v2.34.3
  • codemirror v5.60.0 -> v6.0.1
  • 自定义ColorPicker组件，便于定制组件颜色
  • 更新部分组件为Vue 3版本

文档 | 在线演示 | form-create 文档

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目可继续完善,如有任何建议或问题请在这里提出

引入

NodeJs:

npm i form-designer-naiveui

请自行导入NaiveUI并挂载

import formCreate from '@form-create/naive-ui'
import FcDesigner  from 'form-designer-naiveui'

app.use(formCreate)
app.use(FcDesigner)

使用

<fc-designer ref="designer"/>

设置多语言

通过 locale 配置项设置语言

<template>
  <fc-designer :locale="locale"></fc-designer>
</template>

<script>
import En from "form-designer-naiveui/locale/en.js";
export default {
  data(){
    return {
        locale: En,
    }
  }
}
</script>

组件props

  • menuMenuList 重新配置拖拽的组件

  • heightint|string 设计器组件高度, 默认100%

  • localeobject 设置多语言

  • configConfig 设置多语言

  • mask boolean 设置拖拽表单中的组件是否可以操作

组件方法

  • 获取当前生成表单的生成规则

    type getRule = () => Rule[]

    示例: this.$refs.designer.getRule()

  • 获取当前表单的全局配置

    type getOption = () => Object

  • 设置当前生成表单的规则

    type setRule = (rules: Rule[]) => void;

  • 设置当前表单的全局配置

    type setOption = (option: Object) => void;

  • 增加一组拖拽组件

    type addMenu = (menu: Menu) => void;

  • 删除一组拖拽组件

    type removeMenu = (name: string) => void;

  • 批量覆盖插入拖拽组件

    type setMenuItem = (name: string, items: MenuItem[]) => void;

  • 插入一个拖拽组件到分组

    type appendMenuItem = (name:string, item: MenuItem) => void;

  • 删除一个拖拽组件

    type removeMenuItem = (item: string | MenuItem) => void;

  • 新增一个拖拽组件的生成规则

    type addComponent = (item: DragRule) => void;

提示! 内置的三个组件分组name分别为: main,aide,layout

form-create-designer-naiveuidesignercodestrongVue

有关form-create-designer-naiveui的更多相关文章

  1. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  2. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  3. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  4. ruby-on-rails - ActiveRecord 的 find_or_create* 方法是否存在根本性缺陷？ - 2

    有几种方法:first_or_create_by、find_or_create_by等，它们的工作原理是:与数据库对话以尝试找到我们想要的东西如果我们找不到，就自己做保存到数据库显然，并发调用这些方法可能会使两个线程都找不到它们想要的东西，并且在第3步中一个线程会意外失败。似乎更好的解决方案是，创建或查找即:提前在您的数据库中创建合理的唯一性约束。如果你想保存一些东西，就保存它如果有效，那就太好了。如果它因为RecordNotUnique异常而无法工作，它已经存在，太好了，加载它那么在什么情况下我想使用Rails内置的东西而不是我自己的(看起来更可靠)create_or_find？

  5. ruby-on-rails - 工厂女孩/Rails : Generator to create a factory for existing model? - 2

    我在我的Rails项目中使用rspec_rails和factory_girl_railsgem。所有模型都已创建。是否有我可以运行的生成器来为现有模型创建工厂文件？例如:我已经有了一个Blog模型。RSpec允许我通过简单地运行以下命令在spec/models/blog_spec.rb生成一个模型规范文件:railsgeneraterspec:modelblog是否有我可以在命令行中运行的生成器，它会为这个现有模型生成工厂文件，位于:spec/factories/blogs.rb？我在factory_girl_rails中没有看到任何关于发电机的提及文档。

  6. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at)，我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束)，以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

  7. ruby-on-rails - Simple_form 必填字段不起作用 - Ruby on Rails - 2

    我在RoR应用程序中有一个提交表单，是使用simple_form构建的。当字段为空白时，应用程序仍会继续下一步，而不会提示错误或警告。默认情况下，这些字段应该是required:true；但即使手动编写也行不通。该应用有3个步骤:NewPost(新View)->Preview(创建View)->Post。我的Controller和View的摘录会更清楚:defnew@post=Post.newenddefcreate@post=Post.new(params.require(:post).permit(:title,:category_id))ifparams[:previewButt

  8. ruby - 导轨 3 : Creating app with internal plugin system - 2

    我想在Rails中使用插件系统创建一个应用程序。潜在用户应该能够上传(或更好地从存储库安装)一个插件并安装它，使我的应用程序能够做更多的事情。这应该在没有FTP/SSH/对服务器的任何低级别访问的情况下完成。关于如何在Rails3中完成它，是否有任何好的gems或教程？ 最佳答案 你看过http://edgeguides.rubyonrails.org/plugins.html了吗？？它似乎不是100%兼容Rails3，但它可以帮助您入门。我看过的大多数插件文章都涉及Rails2。 关于

  9. ruby 雾 gem : how to create sub-directories? - 2

    我有connection=Fog::Storage.new(fog_config)bucket=connection.directories.get(bucket_name)有没有办法(已记录、未记录、变通)让我在此存储桶内创建目录？像这样的东西:sub_dir_for_user_1=bucket.create_sub_dir('/user_1_files')sub_dir_for_user_2=bucket.create_sub_dir('/user_2_files') 最佳答案 在S3中，带有尾部斜杠的零字节文件将创建一个伪目录

  10. ruby-on-rails - encode_www_form 将空格转换为 + 而不是 %20 - 2

    我正在尝试从使用RubyonRails的散列创建http参数，我尝试使用URI.encode_www_form(params)，但这没有正确生成参数。下面是我的哈希值params['Name'.to_sym]='NiaKun'params['AddressLine1'.to_sym]='AddressOne'params['City'.to_sym]='CityName'这个方法把空格转成+，我要的是把空格转成%20我收到"Name=Nia+Kun&AddressLine1=Address+One&City=City+Name"但我需要将此空格转换为%20

随机推荐