MiniFormVue2

A form component lib for vue 2, based on ant-design-vue lib.

Get Start

1. Install lib

npm i mini-form-vue2

2. Register components

In main.js:

Don't forget to use and-design-vue first, 'Cause mini-form-vue2 is based on it.

import Antd from 'ant-design-vue';
import MiniFormVue2 from 'mini-form-vue2';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);
Vue.use(MiniFormVue2);

3. Use components

In xxx.vue script:

export default {
  name: 'somePage',
  data() {
    return {
      labelCol: { xs: { span: 24 }, sm: { span: 4 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 19 } },
      formModel: {
        name: "Apisit",
        age: "24",
        memo: "",
      },
      formRows: [
        {
          type: "input",
          name: "name",
          label: "Name",
          valueType: "string",
          defaultValue: "",
          placeholder: "Input name here",
          required: true,
        },
        {
          type: "input",
          name: "age",
          label: "Age",
          valueType: "number",
          defaultValue: "18",
          placeholder: "Input age here",
        },
        {
          type: "textarea",
          name: "memo",
          label: "Memo",
          valueType: "string",
          defaultValue: "",
          placeholder: "Input memo here",
        },
      ],
    }
  }
}

In the template:

<MiniForm
  v-model="formModel"
  :rows="formRows"
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
/>

Reference

See miniapp-develop/form.