vue-form-builder-utils
v0.1.4
Published
### install plugin ``` import Vue from 'vue' import Element from 'element-ui' import locale from 'element-ui/lib/locale/lang/en' import VueFormBuilderUtils from 'vue-form-builder-utils'; import 'vue-form-builder-utils/dist/VueFormBuilderUtils.css';
Downloads
8
Readme
Usage
install plugin
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import VueFormBuilderUtils from 'vue-form-builder-utils';
import 'vue-form-builder-utils/dist/VueFormBuilderUtils.css';
Vue.use(Element, { locale })
Vue.use(VueFormBuilderUtils);
FormBuilder Component
<template>
<form-builder v-model="model" :fields="fields" @submit.native.prevent>
<el-button type="primary" @click="onSubmit">Create</el-button>
</form-builder>
</template>
<script>
import { createModel } from 'vue-form-builder-utils';
export default {
data() {
const fields = [
{ name: 'autocomplete', ui: 'ui-autocomplete', debounce: 400, fetchSuggestions: this.onAutocompleteFetchSuggestions },
{ name: 'user.name', label: '用戶名稱', ui: 'el-input' },
{ name: 'slider.normal', ui: 'el-slider', default: 0 },
{ name: 'slider.range', ui: 'el-slider', range: true, default: [25, 75] },
{ name: 'slider.stop', ui: 'el-slider', range: true, default: [50, 75], step: 10, showStops: true },
{ name: 'color', label: '選擇顏色', ui: 'el-color-picker' },
{ name: 'user.count', label: '數量', ui: 'el-input-number', default: 3, min: 1, max: 5 },
{ name: 'user.ratings', label: '評分', ui: 'el-rate', default: 3.6, },
{ name: 'label2', label: '性別', ui: 'ui-select', default: 'M', options: [{ label: '男生', value: 'M' }, { label: '女生', value: 'F' }], multiple: false },
{ name: 'date', label: '生日', ui: 'el-date-picker', default: '1987-03-31', type: 'date' },
{ name: 'datetimerange', label: '日期區間', ui: 'el-date-picker', type: 'datetimerange', default: ['1987-03-31', '1987-04-01'] },
{ name: 'label4', label: '是否有養過寵物', ui: 'el-switch', default: false },
{ name: 'label5', ui: 'ui-checkbox-group', default: [], options: [{ label: '貓', value: 'cat' }, { label: '狗', value: 'dog' }] },
{ name: 'label6', ui: 'el-input', label: '養寵物的心得', type: 'textarea', hide: { name: 'label4', value: false } },
{ name: 'label7', ui: 'ui-upload', default: [], action: '' },
{ name: 'label8', ui: 'ui-radio-group', label: '顯示Tag', default: '', options: [{ label: '不顯示', value: false }, { label: '顯示', value: true }] },
{ name: 'label9', ui: 'ui-tag', default: ['tag1', 'tag2'], show: { name: 'label8', value: true } },
{
name: 'cards',
fields: [
{ name: 'title', ui: 'el-input', default: '' },
{ name: 'url', ui: 'el-input', default: '' }
]
},
{ name: 'githubFollwing', ui: 'ui-tag', default: [] },
{
name: 'tree',
ui: 'ui-tree',
showCheckbox: true,
highlightCurrent: true,
data: []
},
];
return {
model: createModel(fields),
fields
}
}
}
</script>