w-json-form v0.0.2

my-form

ui component for vue base on element-ui, json 2 form

Preview

# clone
git clone git@github.com:stack-wuh/my-form.git

cd example

npm install 

npm run dev

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

使用

WForm

Props

FieldList 配置

二维数组, 小数组代表行, 小数组内的对象代表列
满足了单行多列的需求

[
  [
    {
      label: 'first name', // -- 表单项目的Label
      field: 'firstName', // -- 表单项目绑定的key
      props: {}, // 深度配置对象, 同element配置
    },
    {
      label: 'last name',
      field: 'lastName'
    }
  ],
  [
    {
      label: 'sex',
      field: 'sex',
      type: 'select',
      list: [
        {
          label: '男',
          value: 1
        }
      ]
    },
    {
      label: 'birth',
      field: 'birth',
      type: 'date',
      props: {
        type: 'date',
        placeholder: '出生日期'
      }
    }
  ],
  [
    {
      label: 'smart',
      field: 'smart',
      type: 'switch'
    }
  ],
  [
    {
      label: 'avatar',
      field: 'avatar',
      type: 'upload',
      props: {
        type: 'image', // image: 单张图片, images: 多张图片, file: 上传文件
        action: 'https://www.baidu.com'
      }
    }
  ]
]

type List

Feature custom

功能性属性配置, 用于FieldList中需要多级联动的处理

ImageGroup 图片展示

Props

image list option

图片的进出场动画要求_id值唯一

{
  _id: String, Number, // 值唯一
  mini: src, // 缩略图
  default: src // 原图
}

ImageItem

Props