基于Vue,ElementUI開發的一款表單設計器

DandJ 發布于2019-08-23 12:13 / 3118人閱讀

摘要：介紹基于開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來工具地址地址特性可視化配置頁面提供柵格布局，并采用實現對齊一鍵預覽配置的效果一鍵生成配置數據一鍵生成代碼，立即可運行提供自定義組件滿足用戶自定義

介紹

基于Vue,ElementUI開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單代碼編寫中解放出來

工具地址：http://tools.xiaoyaoji.cn/form

GitHub地址：https://github.com/GavinZhuLei/vue-form-making

特性

可視化配置頁面

提供柵格布局，并采用flex實現對齊

一鍵預覽配置的效果

一鍵生成配置json數據

一鍵生成代碼，立即可運行

提供自定義組件滿足用戶自定義需求

提供遠端數據接口，方便用戶需要異步獲取數據加載

提供功能強大的高級組件

支持表單驗證

快速獲取表單數據

CDN

Install

npm install form-making -S

Quick Start

import FormMaking from "form-making"
import "form-making/dist/FormMaking.css"
Vue.use(FormMaking)

// or
import {
  GenerateForm
} from "form-making"
import "form-making/dist/FormMaking.css"

Vue.component(GenerateForm.name, GenerateForm)

Template

功能介紹

通過在線地址生成的JSON，用于表單渲染

下面就是加載對應的數據用于展示，假設你已經正確加載組件

new Vue({
    ...
    data () {
        return {
            jsonData: {}, // 表單配置中生成的json數據
            values: {}, // 表單需要顯示的表單數據
            remoteFuncs: {
                // 組件配置時配置的遠端方法,保持和配置時輸入的名稱一致
                func_test (resolve) {
                  // 模擬接口請求
                  setTimeout(() => {
                    const options = [
                      {id: "1", name: "1111"},
                      {id: "2", name: "2222"},
                      {id: "3", name: "3333"}
                    ]
                    
                    // 獲取到的值和標簽可以通過配置頁遠端配置
                    // 值:id  標簽：name
        
                    resolve(options) // 將后端獲取的數據放入回調函數中
                  }, 2000)
                },
                func_test2....
            }
        }
    },
    methods: {
        ...{
            // 調用此方法驗證表單數據和獲取表單數據
            this.$refs.generateForm.getData().then(data => {
                // 數據校驗成功
                // data 為獲取的表單數據
            }).catch(e => {
                // 數據校驗失敗
            })
        }
    }
})

GPU云服務器云服務器基于hadoop的海量數據存儲平臺設計與開發開發一款小程序 vue表單控件 Vue開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98129.html

D2 Crud，一款簡單易用的表格組件

摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數據校驗表格內編輯等常用的功能。大部分功能可由配置實現，在實現并擴展了表格組件功能的同時，降低了開發難度，減少了代碼量，大大簡化了開發流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，并增加了表格的增刪改...

fevin 2019-08-23 11:43 評論0 收藏0
2017年最受歡迎的UI框架

摘要：年馬上到尾聲了，在這里總結一下基于和這四大框架衍生的，經受過時間檢驗深受廣大開發者歡迎的框架。可以說是年最火的引擎類前端框架，以其美觀的設計和高質量的組件很快俘獲了一大批的芳心。　　前端領域最近幾年發展的特別迅速，可以說是百家爭鳴。在底層的前端框架領域中，最早是jquery稱霸互聯網，近兩年MVVM類型的框架慢慢成為主流，Vue、React和Angular三大框架并駕齊驅。可以說，目...

ernest.wang 2019-07-01 12:24 評論0 收藏0
2017年最受歡迎的UI框架

摘要：年馬上到尾聲了，在這里總結一下基于和這四大框架衍生的，經受過時間檢驗深受廣大開發者歡迎的框架。可以說是年最火的引擎類前端框架，以其美觀的設計和高質量的組件很快俘獲了一大批的芳心。　　前端領域最近幾年發展的特別迅速，可以說是百家爭鳴。在底層的前端框架領域中，最早是jquery稱霸互聯網，近兩年MVVM類型的框架慢慢成為主流，Vue、React和Angular三大框架并駕齊驅。可以說，目...

elliott_hu 2019-08-21 17:06 評論0 收藏0
2017年最受歡迎的UI框架

摘要：年馬上到尾聲了，在這里總結一下基于和這四大框架衍生的，經受過時間檢驗深受廣大開發者歡迎的框架。可以說是年最火的引擎類前端框架，以其美觀的設計和高質量的組件很快俘獲了一大批的芳心。　　前端領域最近幾年發展的特別迅速，可以說是百家爭鳴。在底層的前端框架領域中，最早是jquery稱霸互聯網，近兩年MVVM類型的框架慢慢成為主流，Vue、React和Angular三大框架并駕齊驅。可以說，目...

Profeel 2019-08-15 12:13 評論0 收藏0
2017年最受歡迎的UI框架

摘要：年馬上到尾聲了，在這里總結一下基于和這四大框架衍生的，經受過時間檢驗深受廣大開發者歡迎的框架。可以說是年最火的引擎類前端框架，以其美觀的設計和高質量的組件很快俘獲了一大批的芳心。　　前端領域最近幾年發展的特別迅速，可以說是百家爭鳴。在底層的前端框架領域中，最早是jquery稱霸互聯網，近兩年MVVM類型的框架慢慢成為主流，Vue、React和Angular三大框架并駕齊驅。可以說，目...

hufeng 2019-08-01 17:48 評論0 收藏0