From bf9649f6e8f0c00245318ccbbb7157892933b7a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 21 Mar 2017 13:57:29 +0800
Subject: [PATCH] add Form

---
 examples/routers/form.vue   | 381 ++++++++++++++++++++++--------------
 examples/routers/upload.vue | 316 +++++++++++++++---------------
 src/index.js                |   2 +
 3 files changed, 398 insertions(+), 301 deletions(-)

diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index 8c557041..4ef9bfa6 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,132 +1,253 @@
+<!--<template>-->
+    <!--<div>-->
+        <!--date: {{ formInline.date }}-->
+        <!--<i-form ref="formInline" :model="formInline" :rules="ruleInline">-->
+            <!--<Form-item prop="date" label="日期">-->
+                <!--<Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>-->
+            <!--</Form-item>-->
+            <!--<Form-item prop="value2" label="级联选择">-->
+                <!--<Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>-->
+            <!--</Form-item>-->
+            <!--<Form-item prop="user" label="输入框">-->
+                <!--<Input v-model="formInline.user"></Input>-->
+            <!--</Form-item>-->
+            <!--<Form-item prop="targetKeys1" label="穿梭框">-->
+                <!--<Transfer-->
+                    <!--filterable-->
+                    <!--:data="formInline.data1"-->
+                    <!--:target-keys="formInline.targetKeys1"-->
+                    <!--:render-format="render1"-->
+                    <!--@on-change="handleChange1"></Transfer>-->
+            <!--</Form-item>-->
+            <!--<Form-item>-->
+                <!--<i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>-->
+            <!--</Form-item>-->
+        <!--</i-form>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--formInline: {-->
+                    <!--data1: this.getMockData(),-->
+                    <!--targetKeys1: this.getTargetKeys(),-->
+                    <!--date: new Date(),-->
+                    <!--user: '',-->
+                    <!--value2: [],-->
+                    <!--data: [{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京',-->
+                        <!--children: [-->
+                            <!--{-->
+                                <!--value: 'gugong',-->
+                                <!--label: '故宫'-->
+                            <!--},-->
+                            <!--{-->
+                                <!--value: 'tiantan',-->
+                                <!--label: '天坛'-->
+                            <!--},-->
+                            <!--{-->
+                                <!--value: 'wangfujing',-->
+                                <!--label: '王府井'-->
+                            <!--}-->
+                        <!--]-->
+                    <!--}, {-->
+                        <!--value: 'jiangsu',-->
+                        <!--label: '江苏',-->
+                        <!--children: [-->
+                            <!--{-->
+                                <!--value: 'nanjing',-->
+                                <!--label: '南京',-->
+                                <!--children: [-->
+                                    <!--{-->
+                                        <!--value: 'fuzimiao',-->
+                                        <!--label: '夫子庙',-->
+                                    <!--}-->
+                                <!--]-->
+                            <!--},-->
+                            <!--{-->
+                                <!--value: 'suzhou',-->
+                                <!--label: '苏州',-->
+                                <!--children: [-->
+                                    <!--{-->
+                                        <!--value: 'zhuozhengyuan',-->
+                                        <!--label: '拙政园',-->
+                                    <!--},-->
+                                    <!--{-->
+                                        <!--value: 'shizilin',-->
+                                        <!--label: '狮子林',-->
+                                    <!--}-->
+                                <!--]-->
+                            <!--}-->
+                        <!--],-->
+                    <!--}]-->
+                <!--},-->
+                <!--ruleInline: {-->
+                    <!--date: [-->
+                        <!--{-->
+                            <!--required: true,-->
+                            <!--type: 'date',-->
+                            <!--message: '请选择日期',-->
+                            <!--trigger: 'change'-->
+                        <!--}-->
+                    <!--],-->
+                    <!--user: [-->
+                        <!--{-->
+                            <!--required: true,-->
+                            <!--message: '请输入',-->
+                            <!--trigger: 'change',-->
+                            <!--min: 10-->
+                        <!--},-->
+                        <!--{-->
+                            <!--required: true,-->
+                            <!--message: '请输入2',-->
+                            <!--trigger: 'blur'-->
+                        <!--}-->
+                    <!--],-->
+                    <!--value2: [-->
+                        <!--{-->
+                            <!--required: true,-->
+                            <!--type: 'array',-->
+                            <!--message: '请输入',-->
+                            <!--trigger: 'change'-->
+                        <!--}-->
+                    <!--],-->
+                    <!--targetKeys1: [-->
+                        <!--{-->
+                            <!--required: true,-->
+                            <!--type: 'array',-->
+                            <!--max: 2,-->
+                            <!--message: '太多了',-->
+                            <!--trigger: 'change'-->
+                        <!--}-->
+                    <!--]-->
+                <!--}-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleSubmit(name) {-->
+                <!--this.$refs[name].validate((valid) => {-->
+                    <!--if (valid) {-->
+                        <!--this.$Message.success('提交成功!');-->
+                    <!--} else {-->
+                        <!--this.$Message.error('表单验证失败!');-->
+                    <!--}-->
+                <!--})-->
+            <!--},-->
+            <!--handleInput (val) {-->
+                <!--console.log(val)-->
+            <!--},-->
+            <!--getMockData () {-->
+                <!--let mockData = [];-->
+                <!--for (let i = 1; i <= 20; i++) {-->
+                    <!--mockData.push({-->
+                        <!--key: i.toString(),-->
+                        <!--label: '内容' + i,-->
+                        <!--description: '内容' + i + '的描述信息',-->
+                        <!--disabled: Math.random() * 3 < 1-->
+                    <!--});-->
+                <!--}-->
+                <!--return mockData;-->
+            <!--},-->
+            <!--getTargetKeys () {-->
+                <!--return this.getMockData()-->
+                    <!--.filter(() => Math.random() * 2 > 1)-->
+                    <!--.map(item => item.key);-->
+            <!--},-->
+            <!--render1 (item) {-->
+                <!--return item.label;-->
+            <!--},-->
+            <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
+                <!--console.log(newTargetKeys);-->
+                <!--console.log(direction);-->
+                <!--console.log(moveKeys);-->
+                <!--this.formInline.targetKeys1 = newTargetKeys;-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+
+
 <template>
-    <div>
-        date: {{ formInline.date }}
-        <i-form ref="formInline" :model="formInline" :rules="ruleInline">
-            <Form-item prop="date" label="日期">
-                <Date-picker type="date" placeholder="选择日期" v-model="formInline.date"></Date-picker>
-            </Form-item>
-            <Form-item prop="value2" label="级联选择">
-                <Cascader :data="formInline.data" v-model="formInline.value2" change-on-select></Cascader>
-            </Form-item>
-            <Form-item prop="user" label="输入框">
-                <Input v-model="formInline.user"></Input>
-            </Form-item>
-            <Form-item prop="targetKeys1" label="穿梭框">
-                <Transfer
-                    filterable
-                    :data="formInline.data1"
-                    :target-keys="formInline.targetKeys1"
-                    :render-format="render1"
-                    @on-change="handleChange1"></Transfer>
-            </Form-item>
-            <Form-item>
-                <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button>
-            </Form-item>
-        </i-form>
-    </div>
+    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
+        <Form-item label="密码" prop="passwd">
+            <Input type="password" v-model="formCustom.passwd"></Input>
+        </Form-item>
+        <Form-item label="确认密码" prop="passwdCheck">
+            <Input type="password" v-model="formCustom.passwdCheck"></Input>
+        </Form-item>
+        <Form-item label="年龄" prop="age">
+            <Input type="text" v-model="formCustom.age" number></Input>
+        </Form-item>
+        <Form-item>
+            <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
+            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
+        </Form-item>
+    </Form>
 </template>
 <script>
     export default {
         data () {
+            const validatePass = (rule, value, callback) => {
+                if (value === '') {
+                    callback(new Error('请输入密码'));
+                } else {
+                    if (this.formCustom.passwdCheck !== '') {
+                        // 对第二个密码框单独验证
+                        this.$refs.formCustom.validateField('passwdCheck');
+                    }
+                    callback();
+                }
+            };
+            const validatePassCheck = (rule, value, callback) => {
+                if (value === '') {
+                    callback(new Error('请再次输入密码'));
+                } else if (value !== this.formCustom.passwd) {
+                    callback(new Error('两次输入密码不一致!'));
+                } else {
+                    callback();
+                }
+            };
+            const validateAge = (rule, value, callback) => {
+                if (!value) {
+                    return callback(new Error('年龄不能为空'));
+                }
+                // 模拟异步验证效果
+                setTimeout(() => {
+                    if (!Number.isInteger(value)) {
+                        callback(new Error('请输入数字值'));
+                    } else {
+                        if (value < 18) {
+                            callback(new Error('必须年满18岁'));
+                        } else {
+                            callback();
+                        }
+                    }
+                }, 1000);
+            };
+
             return {
-                formInline: {
-                    data1: this.getMockData(),
-                    targetKeys1: this.getTargetKeys(),
-                    date: new Date(),
-                    user: '',
-                    value2: [],
-                    data: [{
-                        value: 'beijing',
-                        label: '北京',
-                        children: [
-                            {
-                                value: 'gugong',
-                                label: '故宫'
-                            },
-                            {
-                                value: 'tiantan',
-                                label: '天坛'
-                            },
-                            {
-                                value: 'wangfujing',
-                                label: '王府井'
-                            }
-                        ]
-                    }, {
-                        value: 'jiangsu',
-                        label: '江苏',
-                        children: [
-                            {
-                                value: 'nanjing',
-                                label: '南京',
-                                children: [
-                                    {
-                                        value: 'fuzimiao',
-                                        label: '夫子庙',
-                                    }
-                                ]
-                            },
-                            {
-                                value: 'suzhou',
-                                label: '苏州',
-                                children: [
-                                    {
-                                        value: 'zhuozhengyuan',
-                                        label: '拙政园',
-                                    },
-                                    {
-                                        value: 'shizilin',
-                                        label: '狮子林',
-                                    }
-                                ]
-                            }
-                        ],
-                    }]
+                formCustom: {
+                    passwd: '',
+                    passwdCheck: '',
+                    age: ''
                 },
-                ruleInline: {
-                    date: [
-                        {
-                            required: true,
-                            type: 'date',
-                            message: '请选择日期',
-                            trigger: 'change'
-                        }
+                ruleCustom: {
+                    passwd: [
+                        { validator: validatePass, trigger: 'blur' }
                     ],
-                    user: [
-                        {
-                            required: true,
-                            message: '请输入',
-                            trigger: 'change',
-                            min: 10
-                        },
-                        {
-                            required: true,
-                            message: '请输入2',
-                            trigger: 'blur'
-                        }
+                    passwdCheck: [
+                        { validator: validatePassCheck, trigger: 'blur' }
                     ],
-                    value2: [
-                        {
-                            required: true,
-                            type: 'array',
-                            message: '请输入',
-                            trigger: 'change'
-                        }
-                    ],
-                    targetKeys1: [
-                        {
-                            required: true,
-                            type: 'array',
-                            max: 2,
-                            message: '太多了',
-                            trigger: 'change'
-                        }
+                    age: [
+                        { validator: validateAge, trigger: 'blur' }
                     ]
                 }
             }
         },
         methods: {
-            handleSubmit(name) {
+            handleSubmit (name) {
                 this.$refs[name].validate((valid) => {
                     if (valid) {
                         this.$Message.success('提交成功!');
@@ -135,34 +256,8 @@
                     }
                 })
             },
-            handleInput (val) {
-                console.log(val)
-            },
-            getMockData () {
-                let mockData = [];
-                for (let i = 1; i <= 20; i++) {
-                    mockData.push({
-                        key: i.toString(),
-                        label: '内容' + i,
-                        description: '内容' + i + '的描述信息',
-                        disabled: Math.random() * 3 < 1
-                    });
-                }
-                return mockData;
-            },
-            getTargetKeys () {
-                return this.getMockData()
-                    .filter(() => Math.random() * 2 > 1)
-                    .map(item => item.key);
-            },
-            render1 (item) {
-                return item.label;
-            },
-            handleChange1 (newTargetKeys, direction, moveKeys) {
-                console.log(newTargetKeys);
-                console.log(direction);
-                console.log(moveKeys);
-                this.formInline.targetKeys1 = newTargetKeys;
+            handleReset (name) {
+                this.$refs[name].resetFields();
             }
         }
     }
diff --git a/examples/routers/upload.vue b/examples/routers/upload.vue
index faa897d7..87bf3785 100644
--- a/examples/routers/upload.vue
+++ b/examples/routers/upload.vue
@@ -1,175 +1,175 @@
-<!--<template>-->
-    <!--<div>-->
-        <!--<div class="demo-upload-list" v-for="item in uploadList">-->
-            <!--<template v-if="item.status === 'finished'">-->
-                <!--<img :src="item.url">-->
-                <!--<div class="demo-upload-list-cover">-->
-                    <!--<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>-->
-                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
-                <!--</div>-->
-            <!--</template>-->
-            <!--<template v-else>-->
-                <!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
-            <!--</template>-->
-        <!--</div>-->
-        <!--<Upload-->
-                <!--ref="upload"-->
-                <!--:show-upload-list="false"-->
-                <!--:default-file-list="defaultList"-->
-                <!--:on-success="handleSuccess"-->
-                <!--:format="['jpg','jpeg','png']"-->
-                <!--:max-size="2048"-->
-                <!--:on-format-error="handleFormatError"-->
-                <!--:on-exceeded-size="handleMaxSize"-->
-                <!--@on-progress="handleProgress"-->
-                <!--:before-upload="handleBeforeUpload"-->
-                <!--multiple-->
-                <!--type="drag"-->
-                <!--action="//jsonplaceholder.typicode.com/posts/"-->
-                <!--style="display: inline-block;width:58px;">-->
-            <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
-                <!--<Icon type="camera" size="20"></Icon>-->
-            <!--</div>-->
-        <!--</Upload>-->
-        <!--{{ visible }}-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--defaultList: [-->
-                    <!--{-->
-                        <!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
-                        <!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--'name': 'bc7521e033abdd1e92222d733590f104',-->
-                        <!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
-                    <!--}-->
-                <!--],-->
-                <!--imgName: '',-->
-                <!--visible: false,-->
-                <!--uploadList: []-->
-            <!--}-->
-        <!--},-->
-        <!--computed: {-->
-<!--//            uploadList () {-->
-<!--//                return this.$refs.upload ? this.$refs.upload.fileList : [];-->
-<!--//            }-->
-        <!--},-->
-        <!--watch: {-->
-
-        <!--},-->
-        <!--mounted () {-->
-            <!--this.uploadList = this.$refs.upload.fileList;-->
-<!--//            console.log(this.$refs.upload.fileList)-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleView (name) {-->
-                <!--this.imgName = name;-->
-                <!--this.visible = true;-->
-            <!--},-->
-            <!--handleRemove (file) {-->
-                <!--// 从 upload 实例删除数据-->
-                <!--const fileList = this.$refs.upload.fileList;-->
-                <!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
-            <!--},-->
-            <!--handleSuccess (res, file) {-->
-                <!--// 因为上传过程为实例，这里模拟添加 url-->
-                <!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
-                <!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
-            <!--},-->
-            <!--handleFormatError (file) {-->
-                <!--this.$Notice.warning({-->
-                    <!--title: '文件格式不正确',-->
-                    <!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
-                <!--});-->
-            <!--},-->
-            <!--handleMaxSize (file) {-->
-                <!--this.$Notice.warning({-->
-                    <!--title: '超出文件大小限制',-->
-                    <!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
-                <!--});-->
-            <!--},-->
-            <!--handleBeforeUpload () {-->
-                <!--const check = this.uploadList.length < 5;-->
-                <!--if (!check) {-->
-                    <!--this.$Notice.warning({-->
-                        <!--title: '最多只能上传 5 张图片。'-->
-                    <!--});-->
-                <!--}-->
-                <!--return check;-->
-            <!--},-->
-            <!--handleProgress (s) {-->
-                <!--console.log(s)-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-<!--<style>-->
-    <!--.demo-upload-list{-->
-        <!--display: inline-block;-->
-        <!--width: 60px;-->
-        <!--height: 60px;-->
-        <!--text-align: center;-->
-        <!--line-height: 60px;-->
-        <!--border: 1px solid transparent;-->
-        <!--border-radius: 4px;-->
-        <!--overflow: hidden;-->
-        <!--background: #fff;-->
-        <!--position: relative;-->
-        <!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
-        <!--margin-right: 4px;-->
-    <!--}-->
-    <!--.demo-upload-list img{-->
-        <!--width: 100%;-->
-        <!--height: 100%;-->
-    <!--}-->
-    <!--.demo-upload-list-cover{-->
-        <!--display: none;-->
-        <!--position: absolute;-->
-        <!--top: 0;-->
-        <!--bottom: 0;-->
-        <!--left: 0;-->
-        <!--right: 0;-->
-        <!--background: rgba(0,0,0,.6);-->
-    <!--}-->
-    <!--.demo-upload-list:hover .demo-upload-list-cover{-->
-        <!--display: block;-->
-    <!--}-->
-    <!--.demo-upload-list-cover i{-->
-        <!--color: #fff;-->
-        <!--font-size: 20px;-->
-        <!--cursor: pointer;-->
-        <!--margin: 0 2px;-->
-    <!--}-->
-<!--</style>-->
-
-
 <template>
     <div>
-        <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
-            <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
+        <div class="demo-upload-list" v-for="item in uploadList">
+            <template v-if="item.status === 'finished'">
+                <img :src="item.url">
+                <div class="demo-upload-list-cover">
+                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
+                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+                </div>
+            </template>
+            <template v-else>
+                <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
+            </template>
+        </div>
+        <Upload
+                ref="upload"
+                :show-upload-list="false"
+                :default-file-list="defaultList"
+                :on-success="handleSuccess"
+                :format="['jpg','jpeg','png']"
+                :max-size="2048"
+                :on-format-error="handleFormatError"
+                :on-exceeded-size="handleMaxSize"
+                @on-progress="handleProgress"
+                :before-upload="handleBeforeUpload"
+                multiple
+                type="drag"
+                action="//jsonplaceholder.typicode.com/posts/"
+                style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+                <Icon type="camera" size="20"></Icon>
+            </div>
         </Upload>
-        <i-button @click.native="handleUpload">上传</i-button>
+        {{ visible }}
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                file: null
+                defaultList: [
+                    {
+                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
+                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
+                    },
+                    {
+                        'name': 'bc7521e033abdd1e92222d733590f104',
+                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
+                    }
+                ],
+                imgName: '',
+                visible: false,
+                uploadList: []
             }
         },
+        computed: {
+//            uploadList () {
+//                return this.$refs.upload ? this.$refs.upload.fileList : [];
+//            }
+        },
+        watch: {
+
+        },
+        mounted () {
+            this.uploadList = this.$refs.upload.fileList;
+//            console.log(this.$refs.upload.fileList)
+        },
         methods: {
-            handleBeforeUpload (file) {
-                this.file = file;
-                return false;
+            handleView (name) {
+                this.imgName = name;
+                this.visible = true;
             },
-            handleUpload () {
-                this.$refs.file.post(this.file);
+            handleRemove (file) {
+                // 从 upload 实例删除数据
+                const fileList = this.$refs.upload.fileList;
+                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
+            },
+            handleSuccess (res, file) {
+                // 因为上传过程为实例，这里模拟添加 url
+                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
+                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
+            },
+            handleFormatError (file) {
+                this.$Notice.warning({
+                    title: '文件格式不正确',
+                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
+                });
+            },
+            handleMaxSize (file) {
+                this.$Notice.warning({
+                    title: '超出文件大小限制',
+                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
+                });
+            },
+            handleBeforeUpload () {
+                const check = this.uploadList.length < 5;
+                if (!check) {
+                    this.$Notice.warning({
+                        title: '最多只能上传 5 张图片。'
+                    });
+                }
+                return check;
+            },
+            handleProgress (s) {
+                console.log(s)
             }
         }
     }
 </script>
+<style>
+    .demo-upload-list{
+        display: inline-block;
+        width: 60px;
+        height: 60px;
+        text-align: center;
+        line-height: 60px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        overflow: hidden;
+        background: #fff;
+        position: relative;
+        box-shadow: 0 1px 1px rgba(0,0,0,.2);
+        margin-right: 4px;
+    }
+    .demo-upload-list img{
+        width: 100%;
+        height: 100%;
+    }
+    .demo-upload-list-cover{
+        display: none;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0,0,0,.6);
+    }
+    .demo-upload-list:hover .demo-upload-list-cover{
+        display: block;
+    }
+    .demo-upload-list-cover i{
+        color: #fff;
+        font-size: 20px;
+        cursor: pointer;
+        margin: 0 2px;
+    }
+</style>
+
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">-->
+            <!--<i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>-->
+        <!--</Upload>-->
+        <!--<i-button @click.native="handleUpload">上传</i-button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--file: null-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleBeforeUpload (file) {-->
+                <!--this.file = file;-->
+                <!--return false;-->
+            <!--},-->
+            <!--handleUpload () {-->
+                <!--this.$refs.file.post(this.file);-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
diff --git a/src/index.js b/src/index.js
index 6400d36f..fd9bdad4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -67,6 +67,7 @@ const iview = {
     Dropdown,
     DropdownItem: Dropdown.Item,
     DropdownMenu: Dropdown.Menu,
+    Form,
     iForm: Form,
     FormItem: Form.Item,
     Col,
@@ -103,6 +104,7 @@ const iview = {
     Spin,
     Step: Steps.Step,
     Steps,
+    // Switch,
     iSwitch: Switch,
     iTable: Table,
     Table,