可视化拖拽表单设计器js插件

可视化拖拽表单设计器js插件源码下载

看看谁在用

查看文件结构

文件大小:0.16M

资源分类: 插件-vue插件

更新时间: 2021-04-16

一款强大的js插件,可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。

获取FcDesigner中表单的生成规则
<template>
  <fc-designer ref="designer" :menu="menu"/>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {};
  },
  methods:{
    getForm(){
      //FcDesigner 生成的`JSON`
      const FcDesignerRule = this.$refs.designer.getRule();
      //FcDesigner 生成的`options`
      const FcDesignerOptions = this.$refs.designer.getOption();
    }
  }
};
</script>
通过规则生成表单
<template>
  <form-create
      v-model="fapi"
      :rule="rule"
      :option="option"
      @submit="onSubmit"
  ></form-create>
</template>

<script>
import formCreate from "@form-create/element-ui";

//FcDesigner 生成的`JSON`
const FcDesignerRule = '[{"type":"input","field":"cuk5qqdw3umc","title":"输入框","info":"","_fc_drag_tag":"input","hidden":false,"display":true}]';

//FcDesigner 生成的`options`
const FcDesignerOptions = '{"form":{"labelPosition":"right","size":"mini","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false}}';

export default {
  data () {
    return {
      fapi: null,
      rule: formCreate.parseJson(FcDesignerRule),
      option: formCreate.parseJson(FcDesignerOptions)
    }
  },
  methods: {
    onSubmit (formData) {
      //todo 提交表单
    }
  }
}
</script>
通过规则在FcDesigner中回显表单
<template>
  <fc-designer ref="designer"/>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {};
  },
  created(){
    this.$refs.designer.setRule(FcDesignerRule);
    this.$refs.designer.setOption(FcDesignerOption);
  }
};
</script>

可视化拖拽表单设计器js插件

正在加载文件目录...

符合预期2021-05-11 16:00

创建表单后怎么导出代码啊

回复打赏

也许你还喜欢

  1. jquery楼宇图拖拽布局工具
  2. bootstrap网格布局拖拽放大组件
  3. bootstrap表单拖拽生成器插件
  4. jquery+bootstrap拖拽布局打印插件
  5. 自定义表单js网页部件
  6. js拖拽网格布局特效
登录注册卡片样式切换css3动画
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2