今天給小夥伴們推薦一款強大的Vue可自由拖拽表單設計器元件。
vue-form-making 基于vue.js簡單高效的表單設計器元件，star高達3.3K+。簡單拖拽即可進行表單設計，可生成/導出json及代碼，支援i18n國際化。
功能特性
- 可視化配置頁面
- 基于vue2.0桌面端元件庫Element-UI
- 提供栅格布局，并采用flex實作對齊
- 一鍵預覽配置的效果
- 一鍵生成配置json資料
- 一鍵生成代碼，立即可運作
- 提供自定義元件滿足使用者自定義需求
- 提供遠端資料接口，友善使用者需要異步擷取資料加載
- 提供功能強大的進階元件
- 支援表單驗證
- 快速擷取表單資料
- 國際化支援
CDN方式引入
NPM安裝
$ npm i form-making -S 引入元件
// 在main.js中完整引入import FormMaking from 'form-making'import 'form-making/dist/FormMaking.css'Vue.use(FormMaking)// 在元件頁面按需引入import { GenerateForm, MakingForm } from 'form-making'import 'form-making/dist/FormMaking.css'Vue.component(GenerateForm)Vue.component(MakingForm) 使用插件
SubmitLoad Option
export default { data () { return { jsonData: {"list":[{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":true,"remoteType":"option","remoteOption":"option","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1575969479252","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"單選框組","key":"1575969479252","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}}, dynamicData: { option : [], // 單選框組 option data } } }, methods: { handleSubmit () { this.$refs.generateForm.getData().then(data => { alert(JSON.stringify(data)) }).catch(e => { }) }, handleLoadOption () { // 模拟資料請求 setTimeout(() => { this.dynamicData.option = [ {value: '1111', label: '1111'}, {value: '2222', label: '2222'}, {value: '3333', label: '3333'} ] }, 500) } }}
語言配置
FormMaking 元件支援中文簡體(zh-CN)和英文(en-US)兩種語言，預設使用中文簡體。
Vue.use(FormMaking, {lang: 'en-US'})// cdn引入配置 富文本編輯器
如果需要使用富文本編輯器，需要單獨引入 vue2-editor
import VueEditor from "vue2-editor"Vue.use(VueEditor) 提供各種示範文檔及豐富的示例
頁面布局
資料綁定
ok，就分享到這裡。希望對大家有所幫助。如果喜歡，記得多支援下哈。