資訊專欄INFORMATION COLUMN
摘要：介紹是一個可以通過生成具有動態渲染數據收集驗證和提交功能的表單生成器。并且支持生成任何組件。結合內置種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。
介紹
form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結合內置17種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。
文檔 | github
功能
自定義組件
可生成任何Vue組件
自帶數據驗證
輕松轉換為表單組件
通過 JSON 生成表單
通過 Maker 生成表單
強大的API，可快速操作表單
雙向數據綁定
事件擴展
局部更新
數據驗證
柵格布局
內置組件17種常用表單組件
對比 1.x速度更快
體積更小
更強大的全局配置
自定義組件更容易擴展
更容易支持第三方 UI 庫
更少的 bug
示例通過 JSON 創建表單
通過 API 操作表單
| 名稱 | 說明 |
|---|---|
| @form-create/iview | iview 版表單生成器 |
| @form-create/element-ui | element-ui 版表單生成器 |
| @form-create/core | form-create 核心包 |
| @form-create/utils | form-create 工具包 |
| @form-create/data | 省市區多級聯動數據 |
以element-ui版本為例介紹如何在項目中使用 form-create
安裝npm i @form-create/element-ui掛載
全局注冊
import formCreate form "@form-create/element-ui"; Vue.use(formCreate);
局部掛載
import formCreate form "@form-create/element-ui";
export default {
components:{
formCreate:formCreaet.$form()
}
}
生成表單
export default {
data () {
return {
//表單實例對象 $f
fApi:{},
//表單生成規則
rule:[
{
type:"input",
field:"goods_name",
title:"商品名稱"
},
{
type:"datePicker",
field:"created_at",
title:"創建時間"
}
]
};
},
methods:{
onSubmit(formData){
//TODO 提交表單
}
}
};
效果
實例對象 $f
可以通過 $f 快速操作表單，例如：
$f.hidden：隱藏指定組件
$f.validate：驗證表單
$f.setValue：修改表單組件的值
$f.append：追加表單組件
自定義組件 生成通過標簽生成
{
type:"el-button",
name: "btn",
props:{
type:"primary",
field:"btn",
loading:true
},
children:["加載中"]
}
通過模板生成
{
type:"template",
name:"btn"
template:"{{text}}",
vm: new Vue({
data:{
loading:true,
text:"加載中"
}
})
}
轉換為表單組件
自定義組件轉換為表單組件后，可通過$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作組件，達到和內置組件相同的效果
預定義props
在自定義組件內部通過props接收一下屬性
value 表單的值
disabled 組件的禁用狀態
例如:
vm = Vue({
props:{
value:String,
disabled:Boolean
}
})
input 事件
通過input事件更新組件內部的值
當組件值發生變化后,通過 input 事件更新值.例如:
vm.$emit("input",newValue);
掛載自定義組件
要生成的自定義組件必須通過Vue.component方法掛載到全局,或者通過formCreate.component方法掛載
例如:
formCreate.component("TestComponent",component);
或者
Vue.component("TestComponent",component);
生成
表單組件必須定義field屬性
JSON
{
type:"TestComponent",
value:"test",
field:"testField",
title:"自定義組件"
}
Maker
formCreate.maker.create("TestComponent","testField","自定義組件").value("test")
示例
自定義計數器按鈕組件,獲取按鈕點擊數.該組件的功能和內置組件相同
formCreate.maker.template("計數器-{{num}} ", new Vue({
props:{
//預定義
disabled:Boolean,
value:Number,
},
data: function () {
return {
num: this.value,
}
},
watch:{
value(n){
this.num = n;
}
},
methods: {
onClick: function () {
this.num++;
//更新組件內部的值
this.$emit("input",this.num);
},
},
}), "tmp", "自定義 title").value(100).props("disabled",false)
完整示例
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104956.html
摘要：目的是節省開發人員在表單頁面上耗費的時間，從而更專注于功能開發。使用可快速便捷的生成日常開發中所需的各種表單?？赏ㄟ^后端返回生成規則，進行渲染。 form-create 具有動態渲染、數據收集、校驗和提交功能的表單生成器，支持雙向數據綁定、事件擴展以及自定義組件，可快速生成包含有省市區三級聯動、時間選擇、日期選擇等17種功能組件。 已兼容iview2.和iview3.版本 Github...
摘要：具有數據收集校驗和提交功能的表單生成器，支持雙向數據綁定和事件擴展，組件包含有復選框單選框輸入框下拉選擇框等表單元素以及省市區三級聯動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。 form-create 具有數據收集、校驗和提交功能的表單生成器，支持雙向數據綁定和事件擴展，組件包含有復選框、單選框、輸入框、下拉選擇框等表單元素以及省市區三級聯動,時間選擇,日期選擇,...
摘要：說明文檔示例商品名稱商品加個創建時間是否顯示顯示不顯示通過建立一個虛擬的方式生成自定義組件生成上面的代碼是通過生成器動態生成一個正在加載的按鈕組件上面的代碼是通過方式動態生成一個按鈕組件修改可以通過一下兩種方式動態修改組件的配置項通 [github] | [說明文檔] 示例 showImg(https://segmentfault.com/img/remote/1460000017...
摘要：表單生成器，使用快速創建現代化的表單，包含復選框單選框輸入框下拉選擇框等元素以及省市區三級聯動時間選擇日期選擇顏色選擇文件圖片上傳等功能。 form-builder PHP表單生成器，使用PHP快速創建現代化的form表單，包含復選框、單選框、輸入框、下拉選擇框等元素以及,省市區三級聯動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳等功能。 Github地址 | Composer地址 ...
閱讀 3073·2021-11-24 11:14
閱讀 3504·2021-11-22 15:22
閱讀 3204·2021-09-27 13:36
閱讀 715·2021-08-31 14:29
閱讀 1331·2019-08-30 15:55
閱讀 1760·2019-08-29 17:29
閱讀 1148·2019-08-29 16:24
閱讀 2409·2019-08-26 13:48
