有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue 表单设计器(一个基于vue-ele-form的表单设计器)

vue 炮渣日记 3周前 (11-19) 17次浏览 已收录 0个评论 扫描二维码

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于vue-ele-form的表单设计器——f-render。

vue 表单设计器(一个基于vue-ele-form的表单设计器)

f-render 是基于element-ui form的二次封装,实现了表单校检、表单布局、响应式表单,并内置了单选,多选,级联等20 多款常用组件,并且有丰富的第三方组件(各种输入框、日期选择器、颜色选择器、级联选择器等) ,这一切的一切只需要拖拽组件即可实现,既保证了质量,又使得开发速度仿佛坐上火箭。

安装使用

  • 安装
yarn add element-ui  # npm install element-ui -S
yarn add vue-ele-form # npm install vue-ele-form -S
yarn add f-render # npm install f-render -S
  • 注册
// vue-ele-form 的注册可参考:https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form";
import FRender from "f-render";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
Vue.use(EleForm);
Vue.component("f-render", FRender);
  • 使用
<template>
  <f-render
    @save="handleSave"
    :loading="loading"
    height="calc(100vh - 60px)"
    :config="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        formConfig: {}
      };
    },
    methods: {
      handleSave(res) {
        // 这里是保存到 localStorage,你可以保存到服务器
        localStorage.setItem("form-config", res);
        this.$message.success("保存成功啦~");
      }
    },
    mounted() {
      // 模拟异步加载
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

表单设计器

  • 界面
vue 表单设计器(一个基于vue-ele-form的表单设计器)
  • 拖拽控件
vue 表单设计器(一个基于vue-ele-form的表单设计器)
  • 预览
vue 表单设计器(一个基于vue-ele-form的表单设计器)
  • 生成代码

f-render方式:

vue 表单设计器(一个基于vue-ele-form的表单设计器)

vue-ele-form方式:

vue 表单设计器(一个基于vue-ele-form的表单设计器)

更多内容大家可自行前往阅读。

开源地址:https://gitee.com/dream2023/f-render

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址