Merge branch 'master' into feat-1.4.0

2019-02-02 16:19:18 +08:00 · 2019-02-02 16:19:18 +08:00 · a0be4e43ad
parent 78c1023785 9a463899fb
commit a0be4e43ad
164 changed files with 2031 additions and 1337 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,4 +1,5 @@
 {
+  "root": true,
    "env": {
        "browser": true,
        "node": true,
@ -6,14 +7,18 @@
        "jest": true,
        "es6": true
    },
-    "parser": "babel-eslint",
-    "extends": ["plugin:vue-libs/recommended", "prettier"],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "extends": ["plugin:vue/recommended", "prettier"],
    "rules": {
        "comma-dangle": [2, "always-multiline"],
        "no-var": "error",
-        "no-unused-vars": "warn",
        "camelcase": "off",
        "no-extra-boolean-cast": "off",
-        "semi": ["error", "always"]
+        "semi": ["error", "always"],
+        "vue/require-prop-types": "off",
+        "vue/require-default-prop": "off",
+        "vue/no-reserved-keys": "off"
    }
-}
+}
--- a/.jest.js
+++ b/.jest.js
@ -28,7 +28,8 @@ module.exports = {
    : '.*\\.test\\.js$',
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1",
-    "ant-design-vue": "<rootDir>/components/index.js"
+    "ant-design-vue": "<rootDir>/components/index.js",
+    "^vue$": "vue/dist/vue.common.js"
  },
  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
  collectCoverage: process.env.COVERAGE === 'true',
--- a/.travis.yml
+++ b/.travis.yml
@ -1,7 +1,7 @@
 language: node_js
 sudo: required
 node_js:
-  - 8.2.1
+  - 10.10.0
 before_script:
  - npm install vue vue-template-compiler
 script:
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -10,6 +10,23 @@

 ---

+## 1.3.4
+`2019-01-31`
+
+🎉 🎉 🎉 Happy New Year!
+- 🐞 fix: AutoComplete placeholder not display when disabled. [#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
+- 🐞 Add the `BreadcrmbItem` ts type file.[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
+- 🐞 Fixed an issue where the FormItem was not updated when it was in a subcomponent. [#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
+- 🐞 Fix some component TypeScript definitions.
+
+## 1.3.3
+`2019-01-26`
+
+- 🐞 Fix `message` not close When you configure maxcount.[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
+- 🐞 Fix some component TypeScript definitions.[#422](https://github.com/vueComponent/ant-design-vue/pull/422)。
+- 🌟 The Anchor component add `warpperClass` `wrapperStyle` property.[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
+- 📝 Update the document: form adds the `preserve` description, and the `icon` modifies the custom component reference document description.
+
 ## 1.3.2
 `2019-01-17`

--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -10,6 +10,23 @@

 ---

+## 1.3.4
+`2019-01-31`
+
+🎉 🎉 🎉 祝大家新年快乐！
+- 🐞 修复AutoComplete组件disabled时，placeholder不显示的问题。[#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
+- 🐞 添加 `BreadcrmbItem` ts类型文件。[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
+- 🐞 修复当FormItem在子组件中时不更新问题。[#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
+- 🐞 修复一些组件 TypeScript 定义。
+
+## 1.3.3
+`2019-01-26`
+
+- 🐞 修复message在配置maxcount时，不能关闭提示窗问题。[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
+- 🐞 修复一些组件 TypeScript 定义。[#422](https://github.com/vueComponent/ant-design-vue/pull/422)。
+- 🌟 Anchor组件新增`warpperClass` `wrapperStyle`属性。[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
+- 📝 更新文档：form增加preserve说明，icon修改自定义组件引用文档说明。
+
 ## 1.3.2
 `2019-01-17`

--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -91,7 +91,7 @@ ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)

 ## Backers

--- a/README.md
+++ b/README.md
@ -86,7 +86,7 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)

 ## Backers

--- a/antd-tools/utils/CleanUpStatsPlugin.js
+++ b/antd-tools/utils/CleanUpStatsPlugin.js
@ -24,13 +24,13 @@ class CleanUpStatsPlugin {

  apply(compiler) {
    compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
-      const { children, warnings } = stats.compilation;
+      const { children } = stats.compilation;
      if (Array.isArray(children)) {
        stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
      }
-      if (Array.isArray(warnings)) {
-        stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
-      }
+      // if (Array.isArray(warnings)) {
+      //   stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
+      // }
    });
  }
 }
--- a/components/_util/ContainerRender.jsx
+++ b/components/_util/ContainerRender.jsx
@ -53,11 +53,11 @@ export default {

        if (!this._component) {
          this._component = new Vue({
+            el: el,
+            parent: self.parent,
            data: {
              comProps: props,
            },
-            parent: self.parent,
-            el: el,
            mounted() {
              this.$nextTick(() => {
                if (ready) {
--- a/components/_util/FormDecoratorDirective.js
+++ b/components/_util/FormDecoratorDirective.js
@ -4,7 +4,7 @@ export function antDecorator(Vue) {

 export default {
  // just for tag
-  install: (Vue, options) => {
+  install: Vue => {
    antDecorator(Vue);
  },
 };
--- a/components/_util/antDirective.js
+++ b/components/_util/antDirective.js
@ -2,7 +2,7 @@ import { antInput } from './antInputDirective';
 import { antDecorator } from './FormDecoratorDirective';

 export default {
-  install: (Vue, options) => {
+  install: Vue => {
    antInput(Vue);
    antDecorator(Vue);
  },
--- a/components/_util/antInputDirective.js
+++ b/components/_util/antInputDirective.js
@ -46,7 +46,7 @@ if (isIE9) {

 export function antInput(Vue) {
  return Vue.directive('ant-input', {
-    inserted(el, binding, vnode, oldVnode) {
+    inserted(el, binding, vnode) {
      if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
        if (!binding.modifiers || !binding.modifiers.lazy) {
          el.addEventListener('compositionstart', onCompositionStart);
@ -67,7 +67,7 @@ export function antInput(Vue) {
 }

 export default {
-  install: (Vue, options) => {
+  install: Vue => {
    antInput(Vue);
  },
 };
--- a/components/_util/openAnimation.js
+++ b/components/_util/openAnimation.js
@ -1,7 +1,7 @@
 import cssAnimation from './css-animation';
 import raf from 'raf';

-function animate(node, show, done, type) {
+function animate(node, show, done) {
  let height;
  let requestAnimationFrameId;
  let appearRequestAnimationFrameId;
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@ -250,7 +250,7 @@ const initDefaultProps = (propTypes, defaultProps) => {
 export function mergeProps() {
  const args = [].slice.call(arguments, 0);
  const props = {};
-  args.forEach((p = {}, i) => {
+  args.forEach((p = {}) => {
    for (const [k, v] of Object.entries(p)) {
      props[k] = props[k] || {};
      if (isPlainObject(v)) {
--- a/components/_util/store/connect.jsx
+++ b/components/_util/store/connect.jsx
@ -24,7 +24,7 @@ export default function connect(mapStateToProps) {
      name: `Connect_${getDisplayName(WrappedComponent)}`,
      props,
      inject: {
-        storeContext: { default: {} },
+        storeContext: { default: () => ({}) },
      },
      data() {
        this.store = this.storeContext.store;
--- a/components/_util/vue-types/index.js
+++ b/components/_util/vue-types/index.js
@ -111,7 +111,7 @@ const VuePropTypes = {

    let hasCustomValidators = false;

-    const nativeChecks = arr.reduce((ret, type, i) => {
+    const nativeChecks = arr.reduce((ret, type) => {
      if (isPlainObject(type)) {
        if (type._vueTypes_name === 'oneOf') {
          return ret.concat(type.type || []);
--- a/components/_util/warning.js
+++ b/components/_util/warning.js
@ -1,7 +1,7 @@
 import warning from 'warning';

 const warned = {};
-export default (valid, message, throwError) => {
+export default (valid, message) => {
  if (!valid && !warned[message]) {
    warning(false, message);
    warned[message] = true;
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@ -81,10 +81,10 @@ const Affix = {
      // Mock Event object.
      this.updatePosition({});
    },
-    offsetTop(val) {
+    offsetTop() {
      this.updatePosition({});
    },
-    offsetBottom(val) {
+    offsetBottom() {
      this.updatePosition({});
    },
  },
--- a/components/anchor/Anchor.jsx
+++ b/components/anchor/Anchor.jsx
@ -4,7 +4,7 @@ import addEventListener from '../_util/Dom/addEventListener';
 import Affix from '../affix';
 import getScroll from '../_util/getScroll';
 import raf from 'raf';
-import { initDefaultProps, getClass } from '../_util/props-util';
+import { initDefaultProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';

 function getDefaultContainer() {
@ -82,6 +82,8 @@ export const AnchorProps = {
  affix: PropTypes.bool,
  showInkInFixed: PropTypes.bool,
  getContainer: PropTypes.func,
+  wrapperClass: PropTypes.string,
+  wrapperStyle: PropTypes.object,
 };

 export default {
@ -213,7 +215,7 @@ export default {
      visible: activeLink,
    });

-    const wrapperClass = classNames(getClass(this), `${prefixCls}-wrapper`);
+    const wrapperClass = classNames(this.wrapperClass, `${prefixCls}-wrapper`);

    const anchorClass = classNames(prefixCls, {
      fixed: !affix && !showInkInFixed,
@ -221,7 +223,7 @@ export default {

    const wrapperStyle = {
      maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
-      // ...getStyle(this, true),
+      ...this.wrapperStyle,
    };

    const anchorContent = (
--- a/components/anchor/AnchorLink.jsx
+++ b/components/anchor/AnchorLink.jsx
@ -15,8 +15,14 @@ export default {
    href: '#',
  }),
  inject: {
-    antAnchor: { default: {} },
-    antAnchorContext: { default: {} },
+    antAnchor: { default: () => ({}) },
+    antAnchorContext: { default: () => ({}) },
+  },
+  watch: {
+    href(val, oldVal) {
+      this.antAnchor.unregisterLink(oldVal);
+      this.antAnchor.registerLink(val);
+    },
  },

  mounted() {
@ -26,12 +32,6 @@ export default {
  beforeDestroy() {
    this.antAnchor.unregisterLink(this.href);
  },
-  watch: {
-    href(val, oldVal) {
-      this.antAnchor.unregisterLink(oldVal);
-      this.antAnchor.registerLink(val);
-    },
-  },
  methods: {
    handleClick(e) {
      this.antAnchor.scrollTo(this.href);
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -11,6 +11,8 @@
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
+| wrapperClass | The class name of the container | string | - |
+| wrapperStyle | The style of the container | object | - |

 ### Events
 | Events Name | Description | Arguments |
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -11,6 +11,8 @@
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
 | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
+| wrapperClass | 容器的类名 | string | - |
+| wrapperStyle | 容器样式 | object | - |

 ### 事件
 | 事件名称 | 说明 | 回调参数 |
--- a/components/auto-complete/tests/index.test.js
+++ b/components/auto-complete/tests/index.test.js
@ -11,7 +11,7 @@ describe('AutoComplete with Custom Input Element Render', () => {
  it('AutoComplete with custom Input render perfectly', done => {
    const wrapper = mount(
      {
-        render(h) {
+        render() {
          return (
            <AutoComplete ref="component" dataSource={['12345', '23456', '34567']}>
              <input />
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@ -54,6 +54,7 @@
      }
      &[disabled] {
        .disabled;
+        background-color: transparent;
      }
    }

--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -16,7 +16,7 @@ describe('Button', () => {

  it('create primary button', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Button type="primary">按钮</Button>;
      },
    });
@ -25,14 +25,14 @@ describe('Button', () => {

  it('renders Chinese characters correctly', done => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Button>按钮</Button>;
      },
    });
    expect(wrapper.text()).toBe('按 钮');

    const wrapper1 = mount({
-      render(h) {
+      render() {
        return <Button icon="search">按钮</Button>;
      },
    });
@ -40,7 +40,7 @@ describe('Button', () => {
    expect(wrapper1.html()).toMatchSnapshot();

    const wrapper2 = mount({
-      render(h) {
+      render() {
        return (
          <Button>
            <Icon type="search" />
@ -52,14 +52,14 @@ describe('Button', () => {
    expect(wrapper2.html()).toMatchSnapshot();
    // should not insert space when there is icon
    const wrapper3 = mount({
-      render(h) {
+      render() {
        return <Button icon="search">按钮</Button>;
      },
    });
    expect(wrapper3.html()).toMatchSnapshot();
    // should not insert space when there is icon while loading
    const wrapper4 = mount({
-      render(h) {
+      render() {
        return (
          <Button icon="search" loading>
            按钮
@ -70,13 +70,13 @@ describe('Button', () => {
    expect(wrapper4.html()).toMatchSnapshot();
    // should insert space while loading
    const wrapper5 = mount({
-      render(h) {
+      render() {
        return <Button loading>按钮</Button>;
      },
    });
    expect(wrapper5.html()).toMatchSnapshot();
    const wrapper6 = mount({
-      render(h) {
+      render() {
        return (
          <Button>
            <span>按钮</span>
@ -151,7 +151,7 @@ describe('Button', () => {

  it('should support link button', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return (
          <Button target="_blank" href="http://ant.design">
            link button
@ -164,21 +164,21 @@ describe('Button', () => {

  it('fixbug renders {0} , 0 and {false}', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Button>{0}</Button>;
      },
    });
    expect(wrapper.html()).toMatchSnapshot();

    const wrapper1 = mount({
-      render(h) {
+      render() {
        return <Button>0</Button>;
      },
    });
    expect(wrapper1.html()).toMatchSnapshot();

    const wrapper2 = mount({
-      render(h) {
+      render() {
        return <Button>{false}</Button>;
      },
    });
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@ -6,8 +6,8 @@ import buttonTypes from './buttonTypes';
 import { filterEmpty } from '../_util/props-util';
 const props = buttonTypes();
 export default {
-  inheritAttrs: false,
  name: 'AButton',
+  inheritAttrs: false,
  __ANT_BUTTON: true,
  props,
  data() {
@ -21,32 +21,6 @@ export default {
      hasTwoCNChar: false,
    };
  },
-  mounted() {
-    this.fixTwoCNChar();
-  },
-  updated() {
-    this.fixTwoCNChar();
-  },
-  beforeDestroy() {
-    // if (this.timeout) {
-    //   clearTimeout(this.timeout)
-    // }
-    if (this.delayTimeout) {
-      clearTimeout(this.delayTimeout);
-    }
-  },
-  watch: {
-    loading(val) {
-      clearTimeout(this.delayTimeout);
-      if (typeof val !== 'boolean' && val && val.delay) {
-        this.delayTimeout = setTimeout(() => {
-          this.sLoading = !!val;
-        }, val.delay);
-      } else {
-        this.sLoading = !!val;
-      }
-    },
-  },
  computed: {
    classes() {
      const {
@ -77,6 +51,32 @@ export default {
      };
    },
  },
+  watch: {
+    loading(val) {
+      clearTimeout(this.delayTimeout);
+      if (typeof val !== 'boolean' && val && val.delay) {
+        this.delayTimeout = setTimeout(() => {
+          this.sLoading = !!val;
+        }, val.delay);
+      } else {
+        this.sLoading = !!val;
+      }
+    },
+  },
+  mounted() {
+    this.fixTwoCNChar();
+  },
+  updated() {
+    this.fixTwoCNChar();
+  },
+  beforeDestroy() {
+    // if (this.timeout) {
+    //   clearTimeout(this.timeout)
+    // }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
+  },
  methods: {
    fixTwoCNChar() {
      // Fix for HOC usage like <FormatMessage />
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -142,8 +142,8 @@ const Cascader = {
    event: 'change',
  },
  inject: {
-    configProvider: { default: {} },
-    localeData: { default: {} },
+    configProvider: { default: () => ({}) },
+    localeData: { default: () => ({}) },
  },
  data() {
    this.cachedOptions = [];
--- a/components/checkbox/Checkbox.jsx
+++ b/components/checkbox/Checkbox.jsx
@ -5,8 +5,11 @@ import { getOptionProps, getAttrs } from '../_util/props-util';
 function noop() {}

 export default {
-  inheritAttrs: false,
  name: 'ACheckbox',
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+  },
  props: {
    prefixCls: {
      default: 'ant-checkbox',
@ -23,11 +26,8 @@ export default {
    type: PropTypes.string.def('checkbox'),
    autoFocus: Boolean,
  },
-  model: {
-    prop: 'checked',
-  },
  inject: {
-    checkboxGroupContext: { default: null },
+    checkboxGroupContext: { default: () => null },
  },
  methods: {
    handleChange(event) {
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -3,6 +3,9 @@ import hasProp from '../_util/props-util';
 function noop() {}
 export default {
  name: 'ACheckboxGroup',
+  model: {
+    prop: 'value',
+  },
  props: {
    prefixCls: {
      default: 'ant-checkbox',
@ -22,9 +25,6 @@ export default {
    },
    disabled: Boolean,
  },
-  model: {
-    prop: 'value',
-  },
  provide() {
    return {
      checkboxGroupContext: this,
--- a/components/comment/tests/snapshots/index.test.js.snap
+++ b/components/comment/tests/snapshots/index.test.js.snap
@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment Comment can be used as editor, user can customize the editor component. 1`] = `
+<div>
+  <div class="ant-list ant-list-split">
+    <div class="ant-list-header">1 reply</div>
+    <div class="ant-spin-nested-loading">
+      <div class="ant-spin-container">
+        <div class="ant-list-item">
+          <div class="ant-list-item-content ant-list-item-content-single">
+            <div class="ant-comment">
+              <div class="ant-comment-inner">
+                <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+                <div class="ant-comment-content">
+                  <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time">a few seconds ago</span></div>
+                  <div class="ant-comment-content-detail">222</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-comment">
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar"></div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-detail">
+          <div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary" ant-click-animating-without-extra-node="true"><span>Add Comment</span></button></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/components/comment/tests/index.test.js
+++ b/components/comment/tests/index.test.js
@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import moment from 'moment';
+import { asyncExpect } from '@/tests/utils';
+import Comment from '..';
+import List from '../../list';
+import Form from '../../form';
+import Button from '../../button';
+import Input from '../../input';
+
+const CommentTest = {
+  data() {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+    };
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.value) {
+        return;
+      }
+
+      this.submitting = true;
+
+      setTimeout(() => {
+        this.submitting = false;
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow(),
+          },
+          ...this.comments,
+        ];
+        this.value = '';
+      }, 1000);
+    },
+    handleChange(e) {
+      this.value = e.target.value;
+    },
+  },
+  render() {
+    return (
+      <div>
+        {this.comments.length ? (
+          <List
+            dataSource={this.comments}
+            header={`${this.comments.length} ${this.comments.length > 1 ? 'replies' : 'reply'}`}
+            itemLayout="horizontal"
+            renderItem={item => {
+              return (
+                <List.Item>
+                  <Comment
+                    author={item.author}
+                    avatar={item.avatar}
+                    content={item.content}
+                    datetime={item.datetime}
+                  />
+                </List.Item>
+              );
+            }}
+          />
+        ) : null}
+        <Comment>
+          <div slot="content">
+            <Form.Item>
+              <Input.TextArea rows={4} onChange={this.handleChange} value={this.value} />
+            </Form.Item>
+            <Form.Item>
+              <Button
+                htmlType="submit"
+                loading={this.submitting}
+                onClick={this.handleSubmit}
+                type="primary"
+              >
+                Add Comment
+              </Button>
+            </Form.Item>
+          </div>
+        </Comment>
+      </div>
+    );
+  },
+};
+
+describe('Comment', () => {
+  it('Comment can be used as editor, user can customize the editor component.', async () => {
+    const wrapper = mount(CommentTest, {
+      sync: false,
+    });
+    await asyncExpect(() => {
+      wrapper.find('textarea').element.value = '222';
+      wrapper.find('textarea').trigger('input');
+    });
+    await asyncExpect(() => {
+      wrapper.find('Button').trigger('click');
+    });
+
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.ant-list-header').wrappers[0].element.innerHTML).toBe('1 reply');
+      expect(wrapper.html()).toMatchSnapshot();
+    }, 2000);
+  });
+});
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -66,18 +66,18 @@ function fixLocale(value, localeCode) {
 }

 export default {
-  mixins: [BaseMixin],
  name: 'ARangePicker',
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
  props: initDefaultProps(RangePickerProps(), {
    prefixCls: 'ant-calendar',
    tagPrefixCls: 'ant-tag',
    allowClear: true,
    showToday: false,
  }),
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
  data() {
    const value = this.value || this.defaultValue || [];
    const [start, end] = value;
--- a/components/date-picker/WeekPicker.jsx
+++ b/components/date-picker/WeekPicker.jsx
@ -26,16 +26,16 @@ export default {
  // };

  // private input: any;
-  props: initDefaultProps(WeekPickerProps(), {
-    format: 'gggg-wo',
-    allowClear: true,
-  }),
  name: 'AWeekPicker',
  mixins: [BaseMixin],
  model: {
    prop: 'value',
    event: 'change',
  },
+  props: initDefaultProps(WeekPickerProps(), {
+    format: 'gggg-wo',
+    allowClear: true,
+  }),
  data() {
    const value = this.value || this.defaultValue;
    if (value && !interopDefault(moment).isMoment(value)) {
--- a/components/drawer/demo/descriptionItem.vue
+++ b/components/drawer/demo/descriptionItem.vue
@ -1,15 +1,20 @@
 <template>
  <div
-      style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
+    style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
+  >
+    <p
+      style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
    >
-      <p
-        style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
-      >
-        {{title}}
-      </p>
-      <template v-if="content">{{content}}</template>
-      <slot name="content" v-else></slot>
-    </div>
+      {{ title }}
+    </p>
+    <template v-if="content">
+      {{ content }}
+    </template>
+    <slot
+      v-else
+      name="content"
+    />
+  </div>
 </template>
 <script>
 export default {
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@ -35,7 +35,7 @@ const Drawer = {
  },
  inject: {
    parentDrawer: {
-      default: null,
+      default: () => null,
    },
  },
  provide() {
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@ -20,6 +20,10 @@ const DropdownButtonProps = {
 export { DropdownButtonProps };
 export default {
  name: 'ADropdownButton',
+  model: {
+    prop: 'visible',
+    event: 'visibleChange',
+  },
  props: DropdownButtonProps,
  methods: {
    onClick(e) {
@ -29,12 +33,8 @@ export default {
      this.$emit('visibleChange', val);
    },
  },
-  model: {
-    prop: 'visible',
-    event: 'visibleChange',
-  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  render() {
    const {
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.jsx
@ -21,7 +21,7 @@ const Dropdown = {
    event: 'visibleChange',
  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  methods: {
    getTransitionName() {
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@ -139,9 +139,31 @@ const Form = {
  createForm(context, options = {}) {
    return new Vue(Form.create({ ...options, templateContext: context })());
  },
+  created() {
+    this.formItemContexts = new Map();
+  },
  provide() {
    return {
      FormProps: this.$props,
+      // https://github.com/vueComponent/ant-design-vue/issues/446
+      collectFormItemContext:
+        this.form && this.form.templateContext
+          ? (c, type = 'add') => {
+              const formItemContexts = this.formItemContexts;
+              const number = formItemContexts.get(c) || 0;
+              if (type === 'delete') {
+                if (number <= 1) {
+                  formItemContexts.delete(c);
+                } else {
+                  formItemContexts.set(c, number - 1);
+                }
+              } else {
+                if (c !== this.form.templateContext) {
+                  formItemContexts.set(c, number + 1);
+                }
+              }
+            }
+          : () => {},
    };
  },
  watch: {
@ -149,6 +171,13 @@ const Form = {
      this.$forceUpdate();
    },
  },
+  beforeUpdate() {
+    this.formItemContexts.forEach((number, c) => {
+      if (c.$forceUpdate) {
+        c.$forceUpdate();
+      }
+    });
+  },
  updated() {
    if (this.form && this.form.cleanUpUselessFields) {
      this.form.cleanUpUselessFields();
@ -232,7 +261,6 @@ const Form = {
        />
      );
    }
-
    return (
      <form onSubmit={onSubmit} class={formClassName}>
        {$slots.default}
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@ -19,6 +19,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement, cloneVNodes } from '../_util/vnode';
 import Icon from '../icon';

+function noop() {}
 export const FormItemProps = {
  id: PropTypes.string,
  prefixCls: PropTypes.string,
@ -34,6 +35,22 @@ export const FormItemProps = {
  fieldDecoratorId: PropTypes.string,
  fieldDecoratorOptions: PropTypes.object,
 };
+function comeFromSlot(vnodes = [], itemVnode) {
+  let isSlot = false;
+  for (let i = 0, len = vnodes.length; i < len; i++) {
+    const vnode = vnodes[i];
+    if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
+      isSlot = true;
+    } else {
+      const children = vnode.componentOptions ? vnode.componentOptions.children : vnode.children;
+      isSlot = comeFromSlot(children, itemVnode);
+    }
+    if (isSlot) {
+      break;
+    }
+  }
+  return isSlot;
+}

 export default {
  name: 'AFormItem',
@ -45,12 +62,24 @@ export default {
    colon: true,
  }),
  inject: {
-    FormProps: { default: {} },
-    decoratorFormProps: { default: {} },
+    FormProps: { default: () => ({}) },
+    decoratorFormProps: { default: () => ({}) },
+    collectFormItemContext: { default: () => noop },
  },
  data() {
    return { helpShow: false };
  },
+  created() {
+    this.collectContext();
+  },
+  beforeUpdate() {
+    if (process.env.NODE_ENV !== 'production') {
+      this.collectContext();
+    }
+  },
+  beforeDestroy() {
+    this.collectFormItemContext(this.$vnode.context, 'delete');
+  },
  mounted() {
    warning(
      this.getControls(this.slotDefault, true).length <= 1,
@ -63,6 +92,24 @@ export default {
    );
  },
  methods: {
+    collectContext() {
+      if (this.FormProps.form && this.FormProps.form.templateContext) {
+        const { templateContext } = this.FormProps.form;
+        const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
+          return [...a, ...b];
+        }, []);
+        const isSlot = comeFromSlot(vnodes, this.$vnode);
+        warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
+        let isSlotScope = false;
+        // 进一步判断是否是通过slot-scope传递
+        if (!isSlot && this.$vnode.context !== templateContext) {
+          isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
+        }
+        if (!isSlotScope && !isSlot) {
+          this.collectFormItemContext(this.$vnode.context);
+        }
+      }
+    },
    getHelpMessage() {
      const help = getComponentFromProp(this, 'help');
      const onlyControl = this.getOnlyControl();
@ -387,7 +434,11 @@ export default {
    decoratorChildren(vnodes) {
      const { FormProps } = this;
      const getFieldDecorator = FormProps.form.getFieldDecorator;
-      vnodes.forEach((vnode, index) => {
+      for (let i = 0, len = vnodes.length; i < len; i++) {
+        const vnode = vnodes[i];
+        if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
+          break;
+        }
        if (vnode.children) {
          vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
        } else if (vnode.componentOptions && vnode.componentOptions.children) {
@ -397,9 +448,9 @@ export default {
        }
        const option = this.decoratorOption(vnode);
        if (option && option[0]) {
-          vnodes[index] = getFieldDecorator(option[0], option[1])(vnode);
+          vnodes[i] = getFieldDecorator(option[0], option[1])(vnode);
        }
-      });
+      }
      return vnodes;
    },
  },
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/components/form/tests/snapshots/demo.test.js.snap
@ -112,7 +112,9 @@ exports[`renders ./components/form/demo/advanced-search.vue correctly 1`] = `
            </svg></i></a></div>
    </div>
  </form>
-  <div class="search-result-list">Search Result List</div>
+  <div class="search-result-list">
+    Search Result List
+  </div>
 </div>
 `;

@ -150,10 +152,11 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
  <div class="ant-row ant-form-item">
    <div class="ant-form-item-label"><label for="price" title="Price" class="">Price</label></div>
    <div class="ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></span>
-        <!---->
-      </div>
-    </div>
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
+    </div></span></span>
+    <!---->
+  </div>
+  </div>
  </div>
  <div class="ant-row ant-form-item">
    <div class="ant-form-item-control-wrapper">
@ -223,13 +226,22 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `

 exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
-  <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
+  <!---->
 </div>
 `;

 exports[`renders ./components/form/demo/global-state.vue correctly 1`] = `
 <div id="components-form-demo-global-state">
-  <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--> <pre class="language-bash">    {
+  <form class="ant-form ant-form-inline">
+    <div class="ant-row ant-form-item">
+      <div class="ant-form-item-label"><label for="username" title="Username" class="ant-form-item-required">Username</label></div>
+      <div class="ant-form-item-control-wrapper">
+        <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="username" class="ant-input"></span>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </form> <pre class="language-bash">    {
  "username": {
    "value": "benjycui"
  }
@ -270,7 +282,13 @@ exports[`renders ./components/form/demo/layout.vue correctly 1`] = `
    <div class="ant-row ant-form-item">
      <div class="ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
      <div class="ant-col-14 ant-form-item-control-wrapper">
-        <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>Inline</span></label></div></span>
+        <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
+          Horizontal
+        </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
+          Vertical
+        </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
+          Inline
+        </span></label></div></span>
        <!---->
      </div>
    </div>
@ -322,8 +340,12 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
    <div class="ant-form-item-control-wrapper">
      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
      Remember me
-    </span></label><a href="" class="login-form-forgot">Forgot password</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
-        Or <a href="">register now!</a></span>
+    </span></label><a href="" class="login-form-forgot">
+          Forgot password
+        </a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
+        Or <a href="">
+          register now!
+        </a></span>
        <!---->
      </div>
    </div>
@ -382,7 +404,11 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
    <div class="ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">+86</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
+          +86
+        " class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+          +86
+        </div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
    </div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="phone" class="ant-input"></span></span></span>
    <!---->
  </div>
@ -413,7 +439,10 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
  </div>
  <div class="ant-row ant-form-item">
    <div class="ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>I have read the <a href="">agreement</a></span></label></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+      I have read the <a href="">
+        agreement
+      </a></span></label></span>
        <!---->
      </div>
    </div>
@ -497,7 +526,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
    <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">China</span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
+      China
+    </span></span>
        <!---->
      </div>
    </div>
@ -529,7 +560,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
    <div class="ant-col-14 ant-form-item-control-wrapper">
      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
      <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
-    </div><span class="ant-form-text"> machines</span></span>
+    </div><span class="ant-form-text">
+      machines
+    </span></span>
    <!---->
  </div>
  </div>
@ -556,7 +589,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-6 ant-form-item-label"><label for="radio-group" title="Radio.Group" class="">Radio.Group</label></div>
    <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
      <!---->
    </div>
  </div>
@ -564,7 +603,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-6 ant-form-item-label"><label for="radio-button" title="Radio.Button" class="">Radio.Button</label></div>
    <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
      <!---->
    </div>
  </div>
@ -572,11 +617,21 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-6 ant-form-item-label"><label for="checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
    <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
+            A
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
+            B
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
+            C
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
+            D
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
+            E
+          </span></label></div>
    </div>
  </div></span>
  <!---->
@ -687,7 +742,11 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
  <div class="ant-row ant-form-item">
    <div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
    <div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option 1</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
+        Option 1
+      " class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+        Option 1
+      </div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
    </div><span class="ant-form-item-children-icon"><i class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i></span></span>
    <!---->
  </div>
--- a/components/form/demo/advanced-search.vue
+++ b/components/form/demo/advanced-search.vue
@ -11,44 +11,65 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 </us>

 <template>
-  <div id='components-form-demo-advanced-search'>
+  <div id="components-form-demo-advanced-search">
    <a-form
-      class='ant-advanced-search-form'
-      @submit="handleSearch"
+      class="ant-advanced-search-form"
      :form="form"
+      @submit="handleSearch"
    >
      <a-row :gutter="24">
-        <a-col v-for="i in 10" :span="8" :key="i" :style="{ display: i < count ? 'block' : 'none' }">
+        <a-col
+          v-for="i in 10"
+          :key="i"
+          :span="8"
+          :style="{ display: i < count ? 'block' : 'none' }"
+        >
          <a-form-item :label="`Field ${i}`">
-              <a-input
-                v-decorator="[
-                  `field-${i}`,
-                  {
-                    rules: [{
-                      required: true,
-                      message: 'Input something!',
-                    }],
-                  }
-                ]"
-                placeholder='placeholder'
-              />
+            <a-input
+              v-decorator="[
+                `field-${i}`,
+                {
+                  rules: [{
+                    required: true,
+                    message: 'Input something!',
+                  }],
+                }
+              ]"
+              placeholder="placeholder"
+            />
          </a-form-item>
        </a-col>
      </a-row>
-        <a-row>
-          <a-col :span="24" :style="{ textAlign: 'right' }">
-            <a-button type='primary' htmlType='submit'>Search</a-button>
-            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-              Clear
-            </a-button>
-            <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
-              Collapse <a-icon :type="expand ? 'up' : 'down'" />
-            </a>
-          </a-col>
-        </a-row>
-      </a-form>
-        <div class='search-result-list'>Search Result List</div>
-      </div>
+      <a-row>
+        <a-col
+          :span="24"
+          :style="{ textAlign: 'right' }"
+        >
+          <a-button
+            type="primary"
+            html-type="submit"
+          >
+            Search
+          </a-button>
+          <a-button
+            :style="{ marginLeft: '8px' }"
+            @click="handleReset"
+          >
+            Clear
+          </a-button>
+          <a
+            :style="{ marginLeft: '8px', fontSize: '12px' }"
+            @click="toggle"
+          >
+            Collapse <a-icon :type="expand ? 'up' : 'down'" />
+          </a>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="search-result-list">
+      Search Result List
+    </div>
+  </div>
 </template>
 <script>

--- a/components/form/demo/coordinated.vue
+++ b/components/form/demo/coordinated.vue
@ -10,11 +10,14 @@ Use `setFieldsValue` to set other control's value programmaticly.


 <template>
-  <a-form @submit="handleSubmit" :form="form">
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
+  >
    <a-form-item
-      label='Note'
-      :labelCol="{ span: 5 }"
-      :wrapperCol="{ span: 12 }"
+      label="Note"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 12 }"
    >
      <a-input
        v-decorator="[
@ -24,26 +27,33 @@ Use `setFieldsValue` to set other control's value programmaticly.
      />
    </a-form-item>
    <a-form-item
-      label='Gender'
-      :labelCol="{ span: 5 }"
-      :wrapperCol="{ span: 12 }"
+      label="Gender"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 12 }"
    >
      <a-select
        v-decorator="[
          'gender',
          {rules: [{ required: true, message: 'Please select your gender!' }]}
        ]"
-        placeholder='Select a option and change input text above'
-        @change="this.handleSelectChange"
+        placeholder="Select a option and change input text above"
+        @change="handleSelectChange"
      >
-        <a-select-option value='male'>male</a-select-option>
-        <a-select-option value='female'>female</a-select-option>
+        <a-select-option value="male">
+          male
+        </a-select-option>
+        <a-select-option value="female">
+          female
+        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
-      :wrapperCol="{ span: 12, offset: 5 }"
+      :wrapper-col="{ span: 12, offset: 5 }"
    >
-      <a-button type='primary' htmlType='submit'>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
        Submit
      </a-button>
    </a-form-item>
--- a/components/form/demo/customized-form-controls.vue
+++ b/components/form/demo/customized-form-controls.vue
@ -16,8 +16,12 @@ Customized or third-party form controls can be used in Form, too. Controls must


 <template>
-  <a-form layout='inline' @submit="handleSubmit" :form="form">
-    <a-form-item label='Price'>
+  <a-form
+    layout="inline"
+    :form="form"
+    @submit="handleSubmit"
+  >
+    <a-form-item label="Price">
      <price-input
        v-decorator="[
          'price',
@ -29,7 +33,12 @@ Customized or third-party form controls can be used in Form, too. Controls must
      />
    </a-form-item>
    <a-form-item>
-      <a-button type='primary' htmlType='submit'>Submit</a-button>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
    </a-form-item>
  </a-form>
 </template>
@ -98,6 +107,9 @@ const PriceInput = {
 };

 export default {
+  components: {
+    PriceInput,
+  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
@ -118,9 +130,6 @@ export default {
      callback('Price must greater than zero!');
    },
  },
-  components: {
-    PriceInput,
-  },
 };

 </script>
--- a/components/form/demo/dynamic-form-item.vue
+++ b/components/form/demo/dynamic-form-item.vue
@ -10,56 +10,64 @@ Add or remove form items dynamically.


 <template>
-<a-form @submit="handleSubmit" :form="form">
-  <a-form-item
-    v-for="(k, index) in form.getFieldValue('keys')"
-    v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
-    :label="index === 0 ? 'Passengers' : ''"
-    :required="false"
-    :key="k"
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
  >
-    <a-input
-      v-decorator="[
-        `names[${k}]`,
-        {
-          validateTrigger: ['change', 'blur'],
-          preserve: true,
-          rules: [{
-            required: true,
-            whitespace: true,
-            message: 'Please input passenger\'s name or delete this field.',
-          }],
-        }
-      ]"
-      placeholder='passenger name'
-      style="width: 60%; margin-right: 8px"
-    />
-    <a-icon
-      v-if="form.getFieldValue('keys').length > 1"
-      class='dynamic-delete-button'
-      type='minus-circle-o'
-      :disabled="form.getFieldValue('keys').length === 1"
-      @click="() => remove(k)"
-    />
-  </a-form-item>
-  <a-form-item v-bind="formItemLayoutWithOutLabel">
-    <a-button type='dashed' @click="add" style="width: 60%">
-      <a-icon type='plus' /> Add field
-    </a-button>
-  </a-form-item>
-  <a-form-item v-bind="formItemLayoutWithOutLabel">
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
-  </a-form-item>
-</a-form>
+    <a-form-item
+      v-for="(k, index) in form.getFieldValue('keys')"
+      :key="k"
+      v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
+      :label="index === 0 ? 'Passengers' : ''"
+      :required="false"
+    >
+      <a-input
+        v-decorator="[
+          `names[${k}]`,
+          {
+            validateTrigger: ['change', 'blur'],
+            preserve: true,
+            rules: [{
+              required: true,
+              whitespace: true,
+              message: 'Please input passenger\'s name or delete this field.',
+            }],
+          }
+        ]"
+        placeholder="passenger name"
+        style="width: 60%; margin-right: 8px"
+      />
+      <a-icon
+        v-if="form.getFieldValue('keys').length > 1"
+        class="dynamic-delete-button"
+        type="minus-circle-o"
+        :disabled="form.getFieldValue('keys').length === 1"
+        @click="() => remove(k)"
+      />
+    </a-form-item>
+    <a-form-item v-bind="formItemLayoutWithOutLabel">
+      <a-button
+        type="dashed"
+        style="width: 60%"
+        @click="add"
+      >
+        <a-icon type="plus" /> Add field
+      </a-button>
+    </a-form-item>
+    <a-form-item v-bind="formItemLayoutWithOutLabel">
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>

 <script>
 let id = 0;
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
-  },
  data () {
    return {
      formItemLayout: {
@ -80,6 +88,10 @@ export default {
      },
    };
  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
+  },
  methods: {
    remove  (k) {
      const { form } = this;
--- a/components/form/demo/dynamic-rule.vue
+++ b/components/form/demo/dynamic-rule.vue
@ -12,34 +12,34 @@ Perform different check rules according to different situations.
 <template>
  <a-form :form="form">
    <a-form-item
-      :labelCol="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
-      label='Name'
+      :label-col="formItemLayout.labelCol"
+      :wrapper-col="formItemLayout.wrapperCol"
+      label="Name"
    >
      <a-input
        v-decorator="[
          'username',
          {rules: [{ required: true, message: 'Please input your name' }]}
        ]"
-       placeholder='Please input your name'
+        placeholder="Please input your name"
      />
    </a-form-item>
    <a-form-item
-      :labelCol="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
-      label='Nickname'
+      :label-col="formItemLayout.labelCol"
+      :wrapper-col="formItemLayout.wrapperCol"
+      label="Nickname"
    >
      <a-input
        v-decorator="[
          'nickname',
          {rules: [{ required: checkNick, message: 'Please input your nickname' }]}
        ]"
-        placeholder='Please input your nickname'
+        placeholder="Please input your nickname"
      />
    </a-form-item>
    <a-form-item
-      :labelCol="formTailLayout.labelCol"
-      :wrapperCol="formTailLayout.wrapperCol"
+      :label-col="formTailLayout.labelCol"
+      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-checkbox
        :checked="checkNick"
@ -49,10 +49,15 @@ Perform different check rules according to different situations.
      </a-checkbox>
    </a-form-item>
    <a-form-item
-      :labelCol="formTailLayout.labelCol"
-      :wrapperCol="formTailLayout.wrapperCol"
+      :label-col="formTailLayout.labelCol"
+      :wrapper-col="formTailLayout.wrapperCol"
    >
-      <a-button type='primary' @click="check">Check</a-button>
+      <a-button
+        type="primary"
+        @click="check"
+      >
+        Check
+      </a-button>
    </a-form-item>
  </a-form>
 </template>
--- a/components/form/demo/form-in-modal.vue
+++ b/components/form/demo/form-in-modal.vue
@ -10,7 +10,12 @@ When user visit a page with a list of items, and want to create a new item. The

 <template>
  <div>
-    <a-button type='primary' @click="showModal">New Collection</a-button>
+    <a-button
+      type="primary"
+      @click="showModal"
+    >
+      New Collection
+    </a-button>
    <collection-create-form
      ref="collectionForm"
      :visible="visible"
@ -70,6 +75,7 @@ const CollectionCreateForm = {
 };

 export default {
+  components: { CollectionCreateForm },
  data () {
    return {
      visible: false,
@ -94,7 +100,6 @@ export default {
      });
    },
  },
-  components: { CollectionCreateForm },
 };
 </script>

--- a/components/form/demo/global-state.vue
+++ b/components/form/demo/global-state.vue
@ -18,13 +18,13 @@ But if you use `this.$form.createForm`, You can use any data, not just the prope


 <template>
-  <div id='components-form-demo-global-state'>
+  <div id="components-form-demo-global-state">
    <customized-form
      :username="fields.username"
      @change="handleFormChange"
    />
-    <pre class='language-bash'>
-      {{JSON.stringify(fields, null, 2)}}
+    <pre class="language-bash">
+      {{ JSON.stringify(fields, null, 2) }}
    </pre>
  </div>
 </template>
@ -77,6 +77,9 @@ const CustomizedForm = {
 };

 export default {
+  components: {
+    CustomizedForm,
+  },
  data () {
    return {
      fields: {
@ -92,9 +95,6 @@ export default {
      this.fields = { ...this.fields, ...changedFields };
    },
  },
-  components: {
-    CustomizedForm,
-  },
 };
 </script>
 <style>
--- a/components/form/demo/horizontal-login.vue
+++ b/components/form/demo/horizontal-login.vue
@ -10,46 +10,58 @@ Horizontal login form is often used in navigation bar.


 <template>
-<a-form layout='inline' @submit="handleSubmit" :form="form">
-  <a-form-item
-    :validateStatus="userNameError() ? 'error' : ''"
-    :help="userNameError() || ''"
+  <a-form
+    layout="inline"
+    :form="form"
+    @submit="handleSubmit"
  >
-    <a-input
-      placeholder='Username'
-      v-decorator="[
-        'userName',
-        {rules: [{ required: true, message: 'Please input your username!' }]}
-      ]"
+    <a-form-item
+      :validate-status="userNameError() ? 'error' : ''"
+      :help="userNameError() || ''"
    >
-      <a-icon slot="prefix" type='user' style="color:rgba(0,0,0,.25)"/>
-    </a-input>
-  </a-form-item>
-  <a-form-item
-    :validateStatus="passwordError() ? 'error' : ''"
-    :help="passwordError() || ''"
-  >
-    <a-input
-      v-decorator="[
-        'password',
-        {rules: [{ required: true, message: 'Please input your Password!' }]}
-      ]"
-      type='password'
-      placeholder='Password'
+      <a-input
+        v-decorator="[
+          'userName',
+          {rules: [{ required: true, message: 'Please input your username!' }]}
+        ]"
+        placeholder="Username"
+      >
+        <a-icon
+          slot="prefix"
+          type="user"
+          style="color:rgba(0,0,0,.25)"
+        />
+      </a-input>
+    </a-form-item>
+    <a-form-item
+      :validate-status="passwordError() ? 'error' : ''"
+      :help="passwordError() || ''"
    >
-      <a-icon slot="prefix" type='lock' style="color:rgba(0,0,0,.25)"/>
-    </a-input>
-  </a-form-item>
-  <a-form-item>
-    <a-button
-      type='primary'
-      htmlType='submit'
-      :disabled="hasErrors(form.getFieldsError())"
-    >
-      Log in
-    </a-button>
-  </a-form-item>
-</a-form>
+      <a-input
+        v-decorator="[
+          'password',
+          {rules: [{ required: true, message: 'Please input your Password!' }]}
+        ]"
+        type="password"
+        placeholder="Password"
+      >
+        <a-icon
+          slot="prefix"
+          type="lock"
+          style="color:rgba(0,0,0,.25)"
+        />
+      </a-input>
+    </a-form-item>
+    <a-form-item>
+      <a-button
+        type="primary"
+        html-type="submit"
+        :disabled="hasErrors(form.getFieldsError())"
+      >
+        Log in
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>

 <script>
--- a/components/form/demo/layout.vue
+++ b/components/form/demo/layout.vue
@ -10,40 +10,51 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.


 <template>
-<div>
-  <a-form :layout="formLayout">
-    <a-form-item
-      label='Form Layout'
-      :labelCol="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
-    >
-      <a-radio-group defaultValue='horizontal' @change="handleFormLayoutChange">
-        <a-radio-button value='horizontal'>Horizontal</a-radio-button>
-        <a-radio-button value='vertical'>Vertical</a-radio-button>
-        <a-radio-button value='inline'>Inline</a-radio-button>
-      </a-radio-group>
-    </a-form-item>
-    <a-form-item
-      label='Field A'
-      :labelCol="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
-    >
-      <a-input placeholder='input placeholder' />
-    </a-form-item>
-    <a-form-item
-      label='Field B'
-      :labelCol="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
-    >
-      <a-input placeholder='input placeholder' />
-    </a-form-item>
-    <a-form-item
-      :wrapperCol="buttonItemLayout.wrapperCol"
-    >
-      <a-button type='primary'>Submit</a-button>
-    </a-form-item>
-  </a-form>
-</div>
+  <div>
+    <a-form :layout="formLayout">
+      <a-form-item
+        label="Form Layout"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-radio-group
+          default-value="horizontal"
+          @change="handleFormLayoutChange"
+        >
+          <a-radio-button value="horizontal">
+            Horizontal
+          </a-radio-button>
+          <a-radio-button value="vertical">
+            Vertical
+          </a-radio-button>
+          <a-radio-button value="inline">
+            Inline
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="Field A"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-input placeholder="input placeholder" />
+      </a-form-item>
+      <a-form-item
+        label="Field B"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-input placeholder="input placeholder" />
+      </a-form-item>
+      <a-form-item
+        :wrapper-col="buttonItemLayout.wrapperCol"
+      >
+        <a-button type="primary">
+          Submit
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>

 <script>
@ -53,11 +64,6 @@ export default {
      formLayout: 'horizontal',
    };
  },
-  methods: {
-    handleFormLayoutChange  (e) {
-      this.formLayout = e.target.value;
-    },
-  },
  computed: {
    formItemLayout () {
      const { formLayout } = this;
@ -73,6 +79,11 @@ export default {
      } : {};
    },
  },
+  methods: {
+    handleFormLayoutChange  (e) {
+      this.formLayout = e.target.value;
+    },
+  },
 };
 </script>

--- a/components/form/demo/normal-login.vue
+++ b/components/form/demo/normal-login.vue
@ -9,16 +9,25 @@ Normal login form which can contain more elements.
 </us>

 <template>
-  <a-form :form="form" id='components-form-demo-normal-login' @submit="handleSubmit" class='login-form'>
+  <a-form
+    id="components-form-demo-normal-login"
+    :form="form"
+    class="login-form"
+    @submit="handleSubmit"
+  >
    <a-form-item>
      <a-input
-        placeholder='Username'
        v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] }
        ]"
+        placeholder="Username"
      >
-        <a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
+        <a-icon
+          slot="prefix"
+          type="user"
+          style="color: rgba(0,0,0,.25)"
+        />
      </a-input>
    </a-form-item>
    <a-form-item>
@ -27,10 +36,14 @@ Normal login form which can contain more elements.
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] }
        ]"
-        type='password'
-        placeholder='Password'
+        type="password"
+        placeholder="Password"
      >
-        <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
+        <a-icon
+          slot="prefix"
+          type="lock"
+          style="color: rgba(0,0,0,.25)"
+        />
      </a-input>
    </a-form-item>
    <a-form-item>
@ -45,11 +58,22 @@ Normal login form which can contain more elements.
      >
        Remember me
      </a-checkbox>
-      <a class='login-form-forgot' href=''>Forgot password</a>
-      <a-button type='primary' htmlType='submit' class='login-form-button'>
+      <a
+        class="login-form-forgot"
+        href=""
+      >
+        Forgot password
+      </a>
+      <a-button
+        type="primary"
+        html-type="submit"
+        class="login-form-button"
+      >
        Log in
      </a-button>
-      Or <a href=''>register now!</a>
+      Or <a href="">
+        register now!
+      </a>
    </a-form-item>
  </a-form>
 </template>
--- a/components/form/demo/register.vue
+++ b/components/form/demo/register.vue
@ -9,166 +9,187 @@ Fill in this form to create a new account for you.
 </us>

 <template>
-<a-form @submit="handleSubmit" :form="form">
-  <a-form-item
-    v-bind="formItemLayout"
-    label='E-mail'
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
  >
-    <a-input
-      v-decorator="[
-        'email',
-        {
-          rules: [{
-            type: 'email', message: 'The input is not valid E-mail!',
-          }, {
-            required: true, message: 'Please input your E-mail!',
-          }]
-        }
-      ]"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Password'
-  >
-    <a-input
-      v-decorator="[
-        'password',
-        {
-          rules: [{
-            required: true, message: 'Please input your password!',
-          }, {
-            validator: this.validateToNextPassword,
-          }],
-        }
-      ]"
-      type='password'
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Confirm Password'
-  >
-    <a-input
-      v-decorator="[
-        'confirm',
-        {
-          rules: [{
-            required: true, message: 'Please confirm your password!',
-          }, {
-            validator: compareToFirstPassword,
-          }],
-        }
-      ]"
-      type='password'
-      @blur="handleConfirmBlur"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-  >
-    <span slot="label">
-      Nickname&nbsp;
-      <a-tooltip title='What do you want others to call you?'>
-        <a-icon type='question-circle-o' />
-      </a-tooltip>
-    </span>
-    <a-input
-      v-decorator="[
-        'nickname',
-        {
-          rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
-        }
-      ]"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Habitual Residence'
-  >
-    <a-cascader
-      v-decorator="[
-        'residence',
-        {
-          initialValue: ['zhejiang', 'hangzhou', 'xihu'],
-          rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
-        }
-      ]"
-      :options="residences"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Phone Number'
-  >
-    <a-input
-      v-decorator="[
-        'phone',
-        {
-          rules: [{ required: true, message: 'Please input your phone number!' }],
-        }
-      ]"
-      style="width: 100%"
+    <a-form-item
+      v-bind="formItemLayout"
+      label="E-mail"
    >
-      <a-select
+      <a-input
        v-decorator="[
-          'prefix',
-          { initialValue: '86' }
+          'email',
+          {
+            rules: [{
+              type: 'email', message: 'The input is not valid E-mail!',
+            }, {
+              required: true, message: 'Please input your E-mail!',
+            }]
+          }
        ]"
-        slot="addonBefore"
-        style="width: 70px"
-      >
-        <a-select-option value='86'>+86</a-select-option>
-        <a-select-option value='87'>+87</a-select-option>
-      </a-select>
-    </a-input>
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Website'
-  >
-    <a-auto-complete
-      v-decorator="[
-        'website',
-        {rules: [{ required: true, message: 'Please input website!' }]}
-      ]"
-      @change="handleWebsiteChange"
-      placeholder='website'
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Password"
    >
-      <template slot="dataSource">
-        <a-select-option v-for="website in autoCompleteResult" :key="website">{{website}}</a-select-option>
-      </template>
-      <a-input />
-    </a-auto-complete>
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Captcha'
-    extra='We must make sure that your are a human.'
-  >
-    <a-row :gutter="8">
-      <a-col :span="12">
-        <a-input
+      <a-input
+        v-decorator="[
+          'password',
+          {
+            rules: [{
+              required: true, message: 'Please input your password!',
+            }, {
+              validator: validateToNextPassword,
+            }],
+          }
+        ]"
+        type="password"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Confirm Password"
+    >
+      <a-input
+        v-decorator="[
+          'confirm',
+          {
+            rules: [{
+              required: true, message: 'Please confirm your password!',
+            }, {
+              validator: compareToFirstPassword,
+            }],
+          }
+        ]"
+        type="password"
+        @blur="handleConfirmBlur"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+    >
+      <span slot="label">
+        Nickname&nbsp;
+        <a-tooltip title="What do you want others to call you?">
+          <a-icon type="question-circle-o" />
+        </a-tooltip>
+      </span>
+      <a-input
+        v-decorator="[
+          'nickname',
+          {
+            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
+          }
+        ]"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Habitual Residence"
+    >
+      <a-cascader
+        v-decorator="[
+          'residence',
+          {
+            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
+            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
+          }
+        ]"
+        :options="residences"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Phone Number"
+    >
+      <a-input
+        v-decorator="[
+          'phone',
+          {
+            rules: [{ required: true, message: 'Please input your phone number!' }],
+          }
+        ]"
+        style="width: 100%"
+      >
+        <a-select
+          slot="addonBefore"
          v-decorator="[
-            'captcha',
-            {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
+            'prefix',
+            { initialValue: '86' }
          ]"
-        />
-      </a-col>
-      <a-col :span="12">
-        <a-button>Get captcha</a-button>
-      </a-col>
-    </a-row>
-  </a-form-item>
-  <a-form-item v-bind="tailFormItemLayout">
-    <a-checkbox
-      v-decorator="['agreement', {valuePropName: 'checked'}]"
-    >I have read the <a href=''>agreement</a></a-checkbox>
-  </a-form-item>
-  <a-form-item v-bind="tailFormItemLayout">
-    <a-button type='primary' htmlType='submit'>Register</a-button>
-  </a-form-item>
-</a-form>
+          style="width: 70px"
+        >
+          <a-select-option value="86">
+            +86
+          </a-select-option>
+          <a-select-option value="87">
+            +87
+          </a-select-option>
+        </a-select>
+      </a-input>
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Website"
+    >
+      <a-auto-complete
+        v-decorator="[
+          'website',
+          {rules: [{ required: true, message: 'Please input website!' }]}
+        ]"
+        placeholder="website"
+        @change="handleWebsiteChange"
+      >
+        <template slot="dataSource">
+          <a-select-option
+            v-for="website in autoCompleteResult"
+            :key="website"
+          >
+            {{ website }}
+          </a-select-option>
+        </template>
+        <a-input />
+      </a-auto-complete>
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Captcha"
+      extra="We must make sure that your are a human."
+    >
+      <a-row :gutter="8">
+        <a-col :span="12">
+          <a-input
+            v-decorator="[
+              'captcha',
+              {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
+            ]"
+          />
+        </a-col>
+        <a-col :span="12">
+          <a-button>Get captcha</a-button>
+        </a-col>
+      </a-row>
+    </a-form-item>
+    <a-form-item v-bind="tailFormItemLayout">
+      <a-checkbox
+        v-decorator="['agreement', {valuePropName: 'checked'}]"
+      >
+        I have read the <a href="">
+          agreement
+        </a>
+      </a-checkbox>
+    </a-form-item>
+    <a-form-item v-bind="tailFormItemLayout">
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Register
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>

 <script>
@ -197,9 +218,6 @@ const residences = [{
 }];

 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
  data () {
    return {
      confirmDirty: false,
@ -229,6 +247,9 @@ export default {
      },
    };
  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
  methods: {
    handleSubmit  (e) {
      e.preventDefault();
--- a/components/form/demo/time-related-controls.vue
+++ b/components/form/demo/time-related-controls.vue
@ -9,58 +9,71 @@ The `value` of time-related components is a `moment` object, which we need to pr
 </us>

 <template>
-<a-form @submit="handleSubmit" :form="form">
-  <a-form-item
-    v-bind="formItemLayout"
-    label='DatePicker'
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
  >
-    <a-date-picker v-decorator="['date-picker', config]"/>
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='DatePicker[showTime]'
-  >
-    <a-date-picker v-decorator="['date-time-picker', config]" showTime format='YYYY-MM-DD HH:mm:ss' />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='MonthPicker'
-  >
-    <a-monthPicker v-decorator="['month-picker', config]" />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='RangePicker'
-  >
-    <a-range-picker v-decorator="['range-picker', rangeConfig]" />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='RangePicker[showTime]'
-  >
-    <a-range-picker v-decorator="['range-time-picker', rangeConfig]" showTime format='YYYY-MM-DD HH:mm:ss' />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='TimePicker'
-  >
-    <a-time-picker v-decorator="['time-picker', config]" />
-  </a-form-item>
-  <a-form-item
-    :wrapperCol="{
-      xs: { span: 24, offset: 0 },
-      sm: { span: 16, offset: 8 },
-    }"
-  >
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
-  </a-form-item>
-</a-form>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="DatePicker"
+    >
+      <a-date-picker v-decorator="['date-picker', config]" />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="DatePicker[showTime]"
+    >
+      <a-date-picker
+        v-decorator="['date-time-picker', config]"
+        show-time
+        format="YYYY-MM-DD HH:mm:ss"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="MonthPicker"
+    >
+      <a-monthPicker v-decorator="['month-picker', config]" />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="RangePicker"
+    >
+      <a-range-picker v-decorator="['range-picker', rangeConfig]" />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="RangePicker[showTime]"
+    >
+      <a-range-picker
+        v-decorator="['range-time-picker', rangeConfig]"
+        show-time
+        format="YYYY-MM-DD HH:mm:ss"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="TimePicker"
+    >
+      <a-time-picker v-decorator="['time-picker', config]" />
+    </a-form-item>
+    <a-form-item
+      :wrapper-col="{
+        xs: { span: 24, offset: 0 },
+        sm: { span: 16, offset: 8 },
+      }"
+    >
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 <script>
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
  data () {
    return {
      formItemLayout: {
@ -81,6 +94,9 @@ export default {
      },
    };
  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
  methods: {
    handleSubmit  (e) {
      e.preventDefault();
--- a/components/form/demo/validate-other.vue
+++ b/components/form/demo/validate-other.vue
@ -10,175 +10,250 @@ Demostration for validataion configuration for form controls which are not show


 <template>
-<a-form id='components-form-demo-validate-other' @submit="handleSubmit" :form="form">
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Plain Text'
+  <a-form
+    id="components-form-demo-validate-other"
+    :form="form"
+    @submit="handleSubmit"
  >
-    <span class='ant-form-text'>China</span>
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Select'
-    hasFeedback
-  >
-    <a-select
-      v-decorator="[
-        'select',
-        {rules: [{ required: true, message: 'Please select your country!' }]}
-      ]"
-      placeholder='Please select a country'
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Plain Text"
    >
-      <a-select-option value='china'>China</a-select-option>
-      <a-select-option value='usa'>U.S.A</a-select-option>
-    </a-select>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Select[multiple]'
-  >
-    <a-select
-      v-decorator="[
-        'select-multiple', {
-        rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
-      }]"
-      mode='multiple'
-      placeholder='Please select favourite colors'
+      <span class="ant-form-text">
+        China
+      </span>
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Select"
+      has-feedback
    >
-      <a-select-option value='red'>Red</a-select-option>
-      <a-select-option value='green'>Green</a-select-option>
-      <a-select-option value='blue'>Blue</a-select-option>
-    </a-select>
-  </a-form-item>
+      <a-select
+        v-decorator="[
+          'select',
+          {rules: [{ required: true, message: 'Please select your country!' }]}
+        ]"
+        placeholder="Please select a country"
+      >
+        <a-select-option value="china">
+          China
+        </a-select-option>
+        <a-select-option value="usa">
+          U.S.A
+        </a-select-option>
+      </a-select>
+    </a-form-item>

-  <a-form-item
-    v-bind="formItemLayout"
-    label='InputNumber'
-  >
-    <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
-    <span class='ant-form-text'> machines</span>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Switch'
-  >
-    <a-switch v-decorator="['switch', { valuePropName: 'checked' }]"/>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Slider'
-  >
-    <a-slider v-decorator="['slider']" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Radio.Group'
-  >
-    <a-radio-group v-decorator="['radio-group']">
-      <a-radio value='a'>item 1</a-radio>
-      <a-radio value='b'>item 2</a-radio>
-      <a-radio value='c'>item 3</a-radio>
-    </a-radio-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Radio.Button'
-  >
-    <a-radio-group v-decorator="['radio-button']">
-      <a-radio-button value='a'>item 1</a-radio-button>
-      <a-radio-button value='b'>item 2</a-radio-button>
-      <a-radio-button value='c'>item 3</a-radio-button>
-    </a-radio-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Checkbox.Group'
-  >
-    <a-checkbox-group style="width: 100%;" v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]">
-      <a-row>
-        <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
-      </a-row>
-    </a-checkbox-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Rate'
-  >
-    <a-rate allowHalf v-decorator="['rate', {initialValue: 3.5}]"/>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Upload'
-    extra='longgggggggggggggggggggggggggggggggggg'
-  >
-    <a-upload
-      v-decorator="['upload', {
-        valuePropName: 'fileList',
-        getValueFromEvent: normFile,
-      }]"
-      name='logo'
-      action='/upload.do'
-      listType='picture'
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Select[multiple]"
    >
-      <a-button>
-        <a-icon type='upload' /> Click to upload
-      </a-button>
-    </a-upload>
-  </a-form-item>
+      <a-select
+        v-decorator="[
+          'select-multiple', {
+            rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
+          }]"
+        mode="multiple"
+        placeholder="Please select favourite colors"
+      >
+        <a-select-option value="red">
+          Red
+        </a-select-option>
+        <a-select-option value="green">
+          Green
+        </a-select-option>
+        <a-select-option value="blue">
+          Blue
+        </a-select-option>
+      </a-select>
+    </a-form-item>

-  <a-form-item
-    v-bind="formItemLayout"
-    label='Dragger'
-  >
-    <div class='dropbox'>
-      <a-upload-dragger
-        v-decorator="['dragger', {
+    <a-form-item
+      v-bind="formItemLayout"
+      label="InputNumber"
+    >
+      <a-input-number
+        v-decorator="['input-number', { initialValue: 3 }]"
+        :min="1"
+        :max="10"
+      />
+      <span class="ant-form-text">
+        machines
+      </span>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Switch"
+    >
+      <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Slider"
+    >
+      <a-slider
+        v-decorator="['slider']"
+        :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
+      />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Radio.Group"
+    >
+      <a-radio-group v-decorator="['radio-group']">
+        <a-radio value="a">
+          item 1
+        </a-radio>
+        <a-radio value="b">
+          item 2
+        </a-radio>
+        <a-radio value="c">
+          item 3
+        </a-radio>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Radio.Button"
+    >
+      <a-radio-group v-decorator="['radio-button']">
+        <a-radio-button value="a">
+          item 1
+        </a-radio-button>
+        <a-radio-button value="b">
+          item 2
+        </a-radio-button>
+        <a-radio-button value="c">
+          item 3
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Checkbox.Group"
+    >
+      <a-checkbox-group
+        v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]"
+        style="width: 100%;"
+      >
+        <a-row>
+          <a-col :span="8">
+            <a-checkbox value="A">
+              A
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox
+              disabled
+              value="B"
+            >
+              B
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="C">
+              C
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="D">
+              D
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="E">
+              E
+            </a-checkbox>
+          </a-col>
+        </a-row>
+      </a-checkbox-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Rate"
+    >
+      <a-rate
+        v-decorator="['rate', {initialValue: 3.5}]"
+        allow-half
+      />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Upload"
+      extra="longgggggggggggggggggggggggggggggggggg"
+    >
+      <a-upload
+        v-decorator="['upload', {
          valuePropName: 'fileList',
          getValueFromEvent: normFile,
        }]"
-        name='files'
-        action='/upload.do'
+        name="logo"
+        action="/upload.do"
+        list-type="picture"
      >
-        <p class='ant-upload-drag-icon'>
-          <a-icon type='inbox' />
-        </p>
-        <p class='ant-upload-text'>Click or drag file to this area to upload</p>
-        <p class='ant-upload-hint'>Support for a single or bulk upload.</p>
-      </a-upload-dragger>
-    </div>
-  </a-form-item>
+        <a-button>
+          <a-icon type="upload" /> Click to upload
+        </a-button>
+      </a-upload>
+    </a-form-item>

-  <a-form-item
-    :wrapperCol="{ span: 12, offset: 6 }"
-  >
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
-  </a-form-item>
-</a-form>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Dragger"
+    >
+      <div class="dropbox">
+        <a-upload-dragger
+          v-decorator="['dragger', {
+            valuePropName: 'fileList',
+            getValueFromEvent: normFile,
+          }]"
+          name="files"
+          action="/upload.do"
+        >
+          <p class="ant-upload-drag-icon">
+            <a-icon type="inbox" />
+          </p>
+          <p class="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p class="ant-upload-hint">
+            Support for a single or bulk upload.
+          </p>
+        </a-upload-dragger>
+      </div>
+    </a-form-item>
+
+    <a-form-item
+      :wrapper-col="{ span: 12, offset: 6 }"
+    >
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>

 <script>
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
  data: () => ({
    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    },
  }),
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
  methods: {
    handleSubmit  (e) {
      e.preventDefault();
--- a/components/form/demo/validate-static.vue
+++ b/components/form/demo/validate-static.vue
@ -18,138 +18,165 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 <template>
  <a-form>
    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Fail'
-      validateStatus='error'
-      help='Should be combination of numbers & alphabets'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Fail"
+      validate-status="error"
+      help="Should be combination of numbers & alphabets"
    >
-      <a-input placeholder='unavailable choice' id='error' />
+      <a-input
+        id="error"
+        placeholder="unavailable choice"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Warning'
-      validateStatus='warning'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Warning"
+      validate-status="warning"
    >
-      <a-input placeholder='Warning' id='warning' />
+      <a-input
+        id="warning"
+        placeholder="Warning"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Validating'
-      hasFeedback
-      validateStatus='validating'
-      help='The information is being validated...'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Validating"
+      has-feedback
+      validate-status="validating"
+      help="The information is being validated..."
    >
-      <a-input placeholder="I'm the content is being validated" id='validating' />
+      <a-input
+        id="validating"
+        placeholder="I'm the content is being validated"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Success'
-      hasFeedback
-      validateStatus='success'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Success"
+      has-feedback
+      validate-status="success"
    >
-      <a-input placeholder="I'm the content" id='success' />
+      <a-input
+        id="success"
+        placeholder="I'm the content"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Warning'
-      hasFeedback
-      validateStatus='warning'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Warning"
+      has-feedback
+      validate-status="warning"
    >
-      <a-input placeholder='Warning' id='warning' />
+      <a-input
+        id="warning"
+        placeholder="Warning"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Fail'
-      hasFeedback
-      validateStatus='error'
-      help='Should be combination of numbers & alphabets'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Fail"
+      has-feedback
+      validate-status="error"
+      help="Should be combination of numbers & alphabets"
    >
-      <a-input placeholder='unavailable choice' id='error' />
+      <a-input
+        id="error"
+        placeholder="unavailable choice"
+      />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Success'
-      hasFeedback
-      validateStatus='success'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Success"
+      has-feedback
+      validate-status="success"
    >
      <a-date-picker style="width: 100%" />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Warning'
-      hasFeedback
-      validateStatus='warning'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Warning"
+      has-feedback
+      validate-status="warning"
    >
      <a-time-picker style="width: 100%" />
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Error'
-      hasFeedback
-      validateStatus='error'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Error"
+      has-feedback
+      validate-status="error"
    >
-      <a-select defaultValue='1'>
-        <a-select-option value='1'>Option 1</a-select-option>
-        <a-select-option value='2'>Option 2</a-select-option>
-        <a-select-option value='3'>Option 3</a-select-option>
+      <a-select default-value="1">
+        <a-select-option value="1">
+          Option 1
+        </a-select-option>
+        <a-select-option value="2">
+          Option 2
+        </a-select-option>
+        <a-select-option value="3">
+          Option 3
+        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Validating'
-      hasFeedback
-      validateStatus='validating'
-      help='The information is being validated...'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Validating"
+      has-feedback
+      validate-status="validating"
+      help="The information is being validated..."
    >
-      <a-cascader :defaultValue="['1']" :options="[]" />
+      <a-cascader
+        :default-value="['1']"
+        :options="[]"
+      />
    </a-form-item>

    <a-form-item
-      label='inline'
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
+      label="inline"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
      style="margin-bottom:0;"
    >
      <a-form-item
-        validateStatus='error'
-        help='Please select the correct date'
+        validate-status="error"
+        help="Please select the correct date"
        :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
      >
-        <a-date-picker style="width: 100%"/>
+        <a-date-picker style="width: 100%" />
      </a-form-item>
      <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
        -
      </span>
      <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-        <a-date-picker style="width: 100%"/>
+        <a-date-picker style="width: 100%" />
      </a-form-item>
    </a-form-item>

    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
-      label='Success'
-      hasFeedback
-      validateStatus='success'
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      label="Success"
+      has-feedback
+      validate-status="success"
    >
      <a-input-number style="width: 100%" />
    </a-form-item>
--- a/components/form/demo/without-form-create.vue
+++ b/components/form/demo/without-form-create.vue
@ -12,10 +12,10 @@
 <template>
  <a-form>
    <a-form-item
-      :labelCol="labelCol"
-      :wrapperCol="wrapperCol"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
      label="Prime between 8 & 12"
-      :validateStatus="number.validateStatus"
+      :validate-status="number.validateStatus"
      :help="number.errorMsg || tips"
    >
      <a-input-number
--- a/components/grid/Col.jsx
+++ b/components/grid/Col.jsx
@ -28,11 +28,11 @@ export const ColProps = {
 };

 export default {
-  props: ColProps,
  name: 'ACol',
+  props: ColProps,
  inject: {
    rowContext: {
-      default: null,
+      default: () => null,
    },
  },
  render() {
--- a/components/icon/tests/index.test.js
+++ b/components/icon/tests/index.test.js
@ -7,7 +7,7 @@ import { cloneElement } from '../../_util/vnode';
 describe('Icon', () => {
  it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Icon type="message" class="my-icon-classname" />;
      },
    });
@ -16,7 +16,7 @@ describe('Icon', () => {

  it('should support basic usage', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return (
          <div>
            <Icon type="home" />
@ -33,7 +33,7 @@ describe('Icon', () => {

  it('should support older usage', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return (
          <div>
            <Icon type="home-o" />
@ -49,7 +49,7 @@ describe('Icon', () => {

  it('should support two-tone icon', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Icon type="check-circle" theme="twoTone" twoToneColor="#f5222d" />;
      },
    });
@ -61,7 +61,7 @@ describe('Icon', () => {
    Icon.setTwoToneColor('#1890ff');
    expect(Icon.getTwoToneColor()).toBe('#1890ff');
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Icon type="check-circle" theme="twoTone" />;
      },
    });
@ -72,7 +72,7 @@ describe('Icon', () => {

  it('should support pass svg paths as children', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return (
          <Icon viewBox="0 0 24 24">
            <title>Cool Home</title>
@ -86,7 +86,7 @@ describe('Icon', () => {

  it('should give warning and render <i>{null}</i>', () => {
    const wrapper = mount({
-      render(h) {
+      render() {
        return <Icon viewBox="0 0 24 24" />;
      },
    });
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -80,25 +80,21 @@ See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.199

 ### Custom SVG Icon

-You can import SVG icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
+You can import SVG icon as an vue component by using `vue cli 3` and [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader). `vue-svg-loader`'s `options` [reference](https://github.com/visualfanatic/vue-svg-loader).

 ```js
-// webpack.config.js
-{
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  use: [
-    {
-      loader: 'babel-loader',
-    },
-    {
-      loader: '@svgr/webpack',
-      options: {
-        babel: false,
-        icon: true,
-      },
-    },
-  ],
-}
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
+};
 ```

 ```jsx
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -78,25 +78,21 @@ new Vue({

 ### 自定义 SVG 图标

-如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
+如果使用 `vue cli 3`，可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。

 ```js
-// webpack.config.js
-{
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-  use: [
-    {
-      loader: 'babel-loader',
-    },
-    {
-      loader: '@svgr/webpack',
-      options: {
-        babel: false,
-        icon: true,
-      },
-    },
-  ],
-}
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    const svgRule = config.module.rule('svg');
+
+    svgRule.uses.clear();
+
+    svgRule
+      .use('vue-svg-loader')
+      .loader('vue-svg-loader');
+  },
+};
 ```

 ```jsx
@ -105,8 +101,10 @@ import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
 new Vue({
  el: '#app',
  template: '<a-icon :component="MessageSvg" />',
-  components: {
-    'my-icon': MyIcon,
+  data() {
+    return {
+      MessageSvg
+    }
  }
 })
 ```
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@ -15,21 +15,26 @@ function fixControlledValue(value) {
 }

 export default {
-  inheritAttrs: false,
  name: 'AInput',
-  props: {
-    ...inputProps,
-  },
+  inheritAttrs: false,
  model: {
    prop: 'value',
    event: 'change.value',
  },
+  props: {
+    ...inputProps,
+  },
  data() {
    const { value, defaultValue } = this.$props;
    return {
      stateValue: fixControlledValue(!hasProp(this, 'value') ? defaultValue : value),
    };
  },
+  watch: {
+    value(val) {
+      this.stateValue = fixControlledValue(val);
+    },
+  },
  mounted() {
    this.$nextTick(() => {
      if (this.autoFocus) {
@ -37,11 +42,6 @@ export default {
      }
    });
  },
-  watch: {
-    value(val) {
-      this.stateValue = fixControlledValue(val);
-    },
-  },
  methods: {
    handleKeyDown(e) {
      if (e.keyCode === 13) {
--- a/components/input/Search.jsx
+++ b/components/input/Search.jsx
@ -9,6 +9,10 @@ import PropTypes from '../_util/vue-types';

 export default {
  name: 'AInputSearch',
+  model: {
+    prop: 'value',
+    event: 'change.value',
+  },
  props: {
    ...inputProps,
    prefixCls: {
@ -21,10 +25,6 @@ export default {
    },
    enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
  },
-  model: {
-    prop: 'value',
-    event: 'change.value',
-  },
  methods: {
    onSearch(e) {
      this.$emit('search', this.$refs.input.stateValue, e);
--- a/components/input/TextArea.jsx
+++ b/components/input/TextArea.jsx
@ -28,14 +28,14 @@ function noop() {}

 export default {
  name: 'ATextarea',
-  props: {
-    ...inputProps,
-    autosize: [Object, Boolean],
-  },
  model: {
    prop: 'value',
    event: 'change.value',
  },
+  props: {
+    ...inputProps,
+    autosize: [Object, Boolean],
+  },
  data() {
    const { value, defaultValue } = this.$props;
    return {
--- a/components/layout/Sider.jsx
+++ b/components/layout/Sider.jsx
@ -71,6 +71,10 @@ export default {
  name: 'ALayoutSider',
  __ANT_LAYOUT_SIDER: true,
  mixins: [BaseMixin],
+  model: {
+    prop: 'collapsed',
+    event: 'collapse',
+  },
  props: initDefaultProps(SiderProps, {
    prefixCls: 'ant-layout-sider',
    collapsible: false,
@ -108,7 +112,7 @@ export default {
    };
  },
  inject: {
-    siderHook: { default: {} },
+    siderHook: { default: () => ({}) },
  },
  // getChildContext() {
  //   return {
@ -146,10 +150,6 @@ export default {
      this.siderHook.removeSider(this.uniqueId);
    }
  },
-  model: {
-    prop: 'collapsed',
-    event: 'collapse',
-  },
  methods: {
    responsiveHandler(mql) {
      this.setState({ below: mql.matches });
--- a/components/list/Item.jsx
+++ b/components/list/Item.jsx
@ -53,7 +53,7 @@ export default {
  Meta,
  props: ListItemProps,
  inject: {
-    listContext: { default: {} },
+    listContext: { default: () => ({}) },
  },

  render() {
--- a/components/locale-provider/LocaleReceiver.jsx
+++ b/components/locale-provider/LocaleReceiver.jsx
@ -8,7 +8,7 @@ export default {
    children: PropTypes.func,
  },
  inject: {
-    localeData: { default: {} },
+    localeData: { default: () => ({}) },
  },
  methods: {
    getLocale() {
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -124,7 +124,7 @@ const columns = [
 ];

 const App = {
-  render(h) {
+  render() {
    return (
      <div>
        <Pagination defaultCurrent={1} total={50} showSizeChanger />
--- a/components/menu/MenuItem.jsx
+++ b/components/menu/MenuItem.jsx
@ -3,9 +3,9 @@ import { getOptionProps } from '../_util/props-util';
 import Tooltip from '../tooltip';
 function noop() {}
 export default {
+  name: 'MenuItem',
  inheritAttrs: false,
  props: itemProps,
-  name: 'MenuItem',
  inject: {
    getInlineCollapsed: { default: () => noop },
  },
@ -15,7 +15,7 @@ export default {
      this.$refs.menuItem.onKeyDown(e);
    },
  },
-  render(h) {
+  render() {
    const props = getOptionProps(this);
    const { level, title, rootPrefixCls } = props;
    const { getInlineCollapsed, $slots, $attrs: attrs, $listeners } = this;
--- a/components/menu/demo/SubMenu.vue
+++ b/components/menu/demo/SubMenu.vue
@ -1,12 +1,29 @@
 <template functional>
-  <a-sub-menu v-on="listeners" :key="data.key">
-    <span slot="title"><a-icon type="mail" /><span>{{data.attrs.menuInfo.title}}</span></span>
-    <template v-for="item in data.attrs.menuInfo.children">
-      <a-menu-item v-if="!item.children" :key="item.key">
+  <a-sub-menu
+    :key="data.key"
+    v-on="listeners"
+  >
+    <span slot="title">
+      <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
+    </span>
+    <template v-for="item in props.menuInfo.children">
+      <a-menu-item
+        v-if="!item.children"
+        :key="item.key"
+      >
        <a-icon type="pie-chart" />
-        <span>{{item.title}}</span>
+        <span>{{ item.title }}</span>
      </a-menu-item>
-      <sub-menu v-else :menuInfo="item" :key="item.key"/>
+      <sub-menu
+        v-else
+        :key="item.key"
+        :menu-info="item"
+      />
    </template>
  </a-sub-menu>
 </template>
+<script>
+export default {
+  props: ['menuInfo'],
+};
+</script>
--- a/components/menu/demo/template.md
+++ b/components/menu/demo/template.md
@ -28,7 +28,7 @@ The properties of `a-sub-menu` are dynamically changed inside the component. If
          <a-icon type="pie-chart" />
          <span>{{item.title}}</span>
        </a-menu-item>
-        <sub-menu v-else :menuInfo="item" :key="item.key"/>
+        <sub-menu v-else :menu-info="item" :key="item.key"/>
      </template>
    </a-menu>
  </div>
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@ -49,8 +49,8 @@ const Menu = {
  },
  mixins: [BaseMixin],
  inject: {
-    layoutSiderContext: { default: {} },
-    configProvider: { default: {} },
+    layoutSiderContext: { default: () => ({}) },
+    configProvider: { default: () => ({}) },
  },
  model: {
    prop: 'selectedKeys',
--- a/components/message/tests/index.test.js
+++ b/components/message/tests/index.test.js
@ -128,7 +128,7 @@ describe('message', () => {
    }, 0);
  });
  it('should allow custom icon', async () => {
-    message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> });
+    message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> }); // eslint-disable-line
    await asyncExpect(() => {
      expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1);
    }, 0);
--- a/components/modal/Modal.jsx
+++ b/components/modal/Modal.jsx
@ -68,6 +68,10 @@ const modalProps = (defaultProps = {}) => {

 export default {
  name: 'AModal',
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
  props: modalProps({
    prefixCls: 'ant-modal',
    width: 520,
@ -79,9 +83,24 @@ export default {
    // okButtonDisabled: false,
    // cancelButtonDisabled: false,
  }),
-  model: {
-    prop: 'visible',
-    event: 'change',
+  mounted() {
+    if (mousePositionEventBinded) {
+      return;
+    }
+    // 只有点击事件支持从鼠标位置动画展开
+    addEventListener(document.documentElement, 'click', e => {
+      mousePosition = {
+        x: e.pageX,
+        y: e.pageY,
+      };
+      // 100ms 内发生过点击事件，则从点击位置动画展示
+      // 否则直接 zoom 展示
+      // 这样可以兼容非点击方式展开
+      setTimeout(() => {
+        mousePosition = null;
+      }, 100);
+    });
+    mousePositionEventBinded = true;
  },
  // static info: ModalFunc;
  // static success: ModalFunc;
@ -124,25 +143,6 @@ export default {
      );
    },
  },
-  mounted() {
-    if (mousePositionEventBinded) {
-      return;
-    }
-    // 只有点击事件支持从鼠标位置动画展开
-    addEventListener(document.documentElement, 'click', e => {
-      mousePosition = {
-        x: e.pageX,
-        y: e.pageY,
-      };
-      // 100ms 内发生过点击事件，则从点击位置动画展示
-      // 否则直接 zoom 展示
-      // 这样可以兼容非点击方式展开
-      setTimeout(() => {
-        mousePosition = null;
-      }, 100);
-    });
-    mousePositionEventBinded = true;
-  },

  render() {
    const { visible, wrapClassName, centered, prefixCls, $listeners, $slots } = this;
--- a/components/notification/index.js
+++ b/components/notification/index.js
@ -85,7 +85,7 @@ function getNotificationInstance(prefixCls, placement, callback) {
      class: `${prefixCls}-${placement}`,
      style: getPlacementStyle(placement),
      getContainer: defaultGetContainer,
-      closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />,
+      closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />, // eslint-disable-line
    },
    notification => {
      notificationInstance[cacheKey] = notification;
@ -128,7 +128,7 @@ function notice(args) {
    );
  } else if (type) {
    const iconType = typeToIcon[type];
-    iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />;
+    iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />; // eslint-disable-line
  }

  getNotificationInstance(outerPrefixCls, placement || defaultPlacement, notification => {
--- a/components/pagination/Pagination.jsx
+++ b/components/pagination/Pagination.jsx
@ -35,15 +35,15 @@ export const PaginationConfig = () => ({

 export default {
  name: 'APagination',
+  model: {
+    prop: 'current',
+    event: 'change.current',
+  },
  props: {
    ...PaginationProps(),
    prefixCls: PropTypes.string.def('ant-pagination'),
    selectPrefixCls: PropTypes.string.def('ant-select'),
  },
-  model: {
-    prop: 'current',
-    event: 'change.current',
-  },
  methods: {
    getIconsProps() {
      const { prefixCls } = this.$props;
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@ -118,7 +118,7 @@ const Popconfirm = {
      );
    },
  },
-  render(h) {
+  render() {
    const props = getOptionProps(this);
    const otherProps = omit(props, ['title', 'content', 'cancelText', 'okText']);
    const tooltipProps = {
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@ -23,7 +23,7 @@ const Popover = {
    },
  },

-  render(h) {
+  render() {
    const { title, prefixCls, $slots } = this;
    const props = getOptionProps(this);
    delete props.title;
--- a/components/radio/Group.jsx
+++ b/components/radio/Group.jsx
@ -6,6 +6,9 @@ function noop() {}

 export default {
  name: 'ARadioGroup',
+  model: {
+    prop: 'value',
+  },
  props: {
    prefixCls: {
      default: 'ant-radio',
@ -33,9 +36,6 @@ export default {
      stateValue: value === undefined ? defaultValue : value,
    };
  },
-  model: {
-    prop: 'value',
-  },
  provide() {
    return {
      radioGroupContext: this,
@ -58,6 +58,11 @@ export default {
      };
    },
  },
+  watch: {
+    value(val) {
+      this.stateValue = val;
+    },
+  },
  methods: {
    onRadioChange(ev) {
      const lastValue = this.stateValue;
@ -71,11 +76,6 @@ export default {
      }
    },
  },
-  watch: {
-    value(val) {
-      this.stateValue = val;
-    },
-  },
  render() {
    const { mouseenter = noop, mouseleave = noop } = this.$listeners;
    const props = getOptionProps(this);
--- a/components/radio/Radio.jsx
+++ b/components/radio/Radio.jsx
@ -7,6 +7,9 @@ function noop() {}

 export default {
  name: 'ARadio',
+  model: {
+    prop: 'checked',
+  },
  props: {
    prefixCls: {
      default: 'ant-radio',
@ -22,9 +25,6 @@ export default {
    autoFocus: Boolean,
    type: PropTypes.string.def('radio'),
  },
-  model: {
-    prop: 'checked',
-  },
  inject: {
    radioGroupContext: { default: undefined },
  },
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@ -107,7 +107,7 @@ const Select = {
    event: 'change',
  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  created() {
    warning(
--- a/components/table/SelectionBox.jsx
+++ b/components/table/SelectionBox.jsx
@ -5,8 +5,8 @@ import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps } from '../_util/props-util';

 export default {
-  mixins: [BaseMixin],
  name: 'SelectionBox',
+  mixins: [BaseMixin],
  props: SelectionBoxProps,
  data() {
    return {
--- a/components/table/SelectionCheckboxAll.jsx
+++ b/components/table/SelectionCheckboxAll.jsx
@ -7,9 +7,9 @@ import { SelectionCheckboxAllProps } from './interface';
 import BaseMixin from '../_util/BaseMixin';

 export default {
-  props: SelectionCheckboxAllProps,
  name: 'SelectionCheckboxAll',
  mixins: [BaseMixin],
+  props: SelectionCheckboxAllProps,
  data() {
    const { $props: props } = this;
    this.defaultSelections = props.hideDefaultSelections
@ -33,10 +33,6 @@ export default {
    };
  },

-  mounted() {
-    this.subscribe();
-  },
-
  watch: {
    $props: {
      handler: function() {
@ -46,6 +42,10 @@ export default {
    },
  },

+  mounted() {
+    this.subscribe();
+  },
+
  beforeDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
--- a/components/table/Table.jsx
+++ b/components/table/Table.jsx
@ -124,7 +124,7 @@ export default {
      },
      deep: true,
    },
-    dataSource(val) {
+    dataSource() {
      this.store.setState({
        selectionDirty: false,
      });
--- a/components/table/demo/EditableCell.vue
+++ b/components/table/demo/EditableCell.vue
@ -1,21 +1,31 @@
 <template>
-<div class='editable-cell'>
-  <div v-if="editable" class='editable-cell-input-wrapper'>
-    <a-input
-      :value="value"
-      @change="handleChange"
-      @pressEnter="check"
-    /><a-icon
-      type='check'
-      class='editable-cell-icon-check'
-      @click="check"
-    />
+  <div class="editable-cell">
+    <div
+      v-if="editable"
+      class="editable-cell-input-wrapper"
+    >
+      <a-input
+        :value="value"
+        @change="handleChange"
+        @pressEnter="check"
+      /><a-icon
+        type="check"
+        class="editable-cell-icon-check"
+        @click="check"
+      />
+    </div>
+    <div
+      v-else
+      class="editable-cell-text-wrapper"
+    >
+      {{ value || ' ' }}
+      <a-icon
+        type="edit"
+        class="editable-cell-icon"
+        @click="edit"
+      />
+    </div>
  </div>
-  <div v-else class='editable-cell-text-wrapper'>
-    {{value || ' '}}
-    <a-icon type='edit' class='editable-cell-icon' @click="edit" />
-  </div>
-</div>
 </template>
 <script>
 export default {
--- a/components/table/filterDropdown.jsx
+++ b/components/table/filterDropdown.jsx
@ -17,8 +17,8 @@ function stopPropagation(e) {
 }

 export default {
-  mixins: [BaseMixin],
  name: 'FilterMenu',
+  mixins: [BaseMixin],
  props: initDefaultProps(FilterMenuProps, {
    handleFilter() {},
    column: {},
@ -34,13 +34,6 @@ export default {
      sVisible: visible,
    };
  },
-
-  mounted() {
-    const { column } = this;
-    this.$nextTick(() => {
-      this.setNeverShown(column);
-    });
-  },
  watch: {
    _propsSymbol() {
      const nextProps = getOptionProps(this);
@ -81,6 +74,13 @@ export default {
    //   this.sSelectedKeys = val
    // },
  },
+
+  mounted() {
+    const { column } = this;
+    this.$nextTick(() => {
+      this.setNeverShown(column);
+    });
+  },
  methods: {
    getDropdownVisible() {
      return this.neverShown ? false : this.sVisible;
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@ -10,6 +10,10 @@ import TabBar from './TabBar';
 export default {
  TabPane,
  name: 'ATabs',
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
  props: {
    prefixCls: PropTypes.string.def('ant-tabs'),
    activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@ -25,9 +29,12 @@ export default {
    tabBarGutter: PropTypes.number,
    renderTabBar: PropTypes.func,
  },
-  model: {
-    prop: 'activeKey',
-    event: 'change',
+  mounted() {
+    const NO_FLEX = ' no-flex';
+    const tabNode = this.$el;
+    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
+      tabNode.className += NO_FLEX;
+    }
  },
  methods: {
    removeTab(targetKey, e) {
@ -54,14 +61,6 @@ export default {
    },
  },

-  mounted() {
-    const NO_FLEX = ' no-flex';
-    const tabNode = this.$el;
-    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
-      tabNode.className += NO_FLEX;
-    }
-  },
-
  render() {
    const props = getOptionProps(this);
    const {
--- a/components/tag/Tag.jsx
+++ b/components/tag/Tag.jsx
@ -9,6 +9,10 @@ import BaseMixin from '../_util/BaseMixin';
 export default {
  name: 'ATag',
  mixins: [BaseMixin],
+  model: {
+    prop: 'visible',
+    event: 'close.visible',
+  },
  props: {
    prefixCls: PropTypes.string.def('ant-tag'),
    color: PropTypes.string,
@ -16,10 +20,6 @@ export default {
    visible: PropTypes.bool,
    afterClose: PropTypes.func,
  },
-  model: {
-    prop: 'visible',
-    event: 'close.visible',
-  },
  data() {
    let _visible = true;
    if (hasProp(this, 'visible')) {
--- a/components/time-picker/index.jsx
+++ b/components/time-picker/index.jsx
@ -87,7 +87,7 @@ const TimePicker = {
    event: 'change',
  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  data() {
    const value = this.value || this.defaultValue;
--- a/components/tooltip/Tooltip.jsx
+++ b/components/tooltip/Tooltip.jsx
@ -25,16 +25,16 @@ const splitObject = (obj, keys) => {
 const props = abstractTooltipProps();
 export default {
  name: 'ATooltip',
-  props: {
-    ...props,
-    title: PropTypes.any,
-  },
  model: {
    prop: 'visible',
    event: 'visibleChange',
  },
+  props: {
+    ...props,
+    title: PropTypes.any,
+  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  data() {
    return {
@ -156,7 +156,7 @@ export default {
    },
  },

-  render(h) {
+  render() {
    const { $props, $data, $slots, $listeners } = this;
    const { prefixCls, openClassName, getPopupContainer } = $props;
    const { getPopupContainer: getContextPopupContainer } = this.configProvider;
--- a/components/transfer/item.jsx
+++ b/components/transfer/item.jsx
@ -6,6 +6,7 @@ import Checkbox from '../checkbox';
 function noop() {}

 export default {
+  name: 'Item',
  props: {
    renderedText: PropTypes.any,
    renderedEl: PropTypes.any,
@ -15,7 +16,6 @@ export default {
    prefixCls: PropTypes.string,
    disabled: PropTypes.bool,
  },
-  name: 'Item',
  render() {
    const { renderedText, renderedEl, item, lazy, checked, disabled, prefixCls } = this.$props;

--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@ -34,7 +34,7 @@ const TreeSelect = {
    event: 'change',
  },
  inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
  },
  created() {
    warning(
--- a/components/tree/DirectoryTree.jsx
+++ b/components/tree/DirectoryTree.jsx
@ -28,8 +28,8 @@ function getIcon(props, h) {
 }

 export default {
-  mixins: [BaseMixin],
  name: 'ADirectoryTree',
+  mixins: [BaseMixin],
  model: {
    prop: 'checkedKeys',
    event: 'check',
--- a/components/upload/Upload.jsx
+++ b/components/upload/Upload.jsx
@ -13,10 +13,10 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
 export { UploadProps };

 export default {
-  inheritAttrs: false,
  name: 'AUpload',
-  Dragger: Dragger,
  mixins: [BaseMixin],
+  inheritAttrs: false,
+  Dragger: Dragger,
  props: initDefaultProps(UploadProps, {
    prefixCls: 'ant-upload',
    type: 'select',
@ -38,14 +38,14 @@ export default {
      dragState: 'drop',
    };
  },
-  beforeDestroy() {
-    this.clearProgressTimer();
-  },
  watch: {
    fileList(val) {
      this.sFileList = val;
    },
  },
+  beforeDestroy() {
+    this.clearProgressTimer();
+  },
  methods: {
    onStart(file) {
      const targetItem = fileToObject(file);
--- a/components/vc-calendar/demo/antd-calendar.vue
+++ b/components/vc-calendar/demo/antd-calendar.vue
@ -1,5 +1,5 @@
 <script>
-/* eslint react/no-multi-comp:0, no-console:0 */
+/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */

 import '../assets/index.less';
 import PropTypes from '@/components/_util/vue-types';
@ -17,7 +17,6 @@ import 'moment/locale/en-gb';

 const format = 'YYYY-MM-DD HH:mm:ss';
 const cn = window.location.search.indexOf('cn') !== -1;
-
 const now = moment();
 if (cn) {
  now.locale('zh-cn').utcOffset(8);
--- a/components/vc-calendar/demo/antd-range-calendar.vue
+++ b/components/vc-calendar/demo/antd-range-calendar.vue
@ -1,5 +1,5 @@
 <script>
-/* eslint react/no-multi-comp:0, no-console:0 */
+/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */

 import '../assets/index.less';
 import '@/components/vc-time-picker/assets/index.less';
--- a/components/vc-calendar/src/RangeCalendar.jsx
+++ b/components/vc-calendar/src/RangeCalendar.jsx
@ -126,7 +126,7 @@ const RangeCalendar = {
    };
  },
  watch: {
-    value(val) {
+    value() {
      const newState = {};
      newState.sValue = normalizeAnchor(this.$props, 0);
      this.setState(newState);
--- a/components/vc-cascader/Cascader.jsx
+++ b/components/vc-cascader/Cascader.jsx
@ -45,6 +45,11 @@ const BUILT_IN_PLACEMENTS = {
 };

 export default {
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
  props: {
    value: PropTypes.array,
    defaultValue: PropTypes.array,
@ -69,11 +74,6 @@ export default {
    loadingIcon: PropTypes.any,
    getPopupContainer: PropTypes.func,
  },
-  mixins: [BaseMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
  data() {
    let initialValue = [];
    const { value, defaultValue, popupVisible } = this;
--- a/components/vc-cascader/Menus.jsx
+++ b/components/vc-cascader/Menus.jsx
@ -24,11 +24,6 @@ export default {
    this.menuItems = {};
    return {};
  },
-  mounted() {
-    this.$nextTick(() => {
-      this.scrollActiveItemToView();
-    });
-  },
  watch: {
    visible(val) {
      if (val) {
@ -38,6 +33,11 @@ export default {
      }
    },
  },
+  mounted() {
+    this.$nextTick(() => {
+      this.scrollActiveItemToView();
+    });
+  },
  methods: {
    getFieldName(name) {
      const { fieldNames, defaultFieldNames } = this.$props;
--- a/components/vc-checkbox/src/Checkbox.jsx
+++ b/components/vc-checkbox/src/Checkbox.jsx
@ -7,6 +7,10 @@ export default {
  name: 'Checkbox',
  mixins: [BaseMixin],
  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
  props: initDefaultProps(
    {
      prefixCls: PropTypes.string,
@ -31,10 +35,6 @@ export default {
      defaultChecked: false,
    },
  ),
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
  data() {
    const checked = hasProp(this, 'checked') ? this.checked : this.defaultChecked;
    return {
--- a/components/vc-collapse/src/Collapse.jsx
+++ b/components/vc-collapse/src/Collapse.jsx
@ -36,6 +36,18 @@ export default {
      stateActiveKey: _toArray(currentActiveKey),
    };
  },
+  watch: {
+    activeKey(val) {
+      this.setState({
+        stateActiveKey: _toArray(val),
+      });
+    },
+    openAnimation(val) {
+      this.setState({
+        currentOpenAnimations: val,
+      });
+    },
+  },
  methods: {
    onClickItem(key) {
      let activeKey = this.stateActiveKey;
@ -103,18 +115,6 @@ export default {
      this.$emit('change', this.accordion ? activeKey[0] : activeKey);
    },
  },
-  watch: {
-    activeKey(val) {
-      this.setState({
-        stateActiveKey: _toArray(val),
-      });
-    },
-    openAnimation(val) {
-      this.setState({
-        currentOpenAnimations: val,
-      });
-    },
-  },
  render() {
    const { prefixCls, accordion } = this.$props;
    const collapseClassName = {
--- a/components/vc-dialog/Dialog.jsx
+++ b/components/vc-dialog/Dialog.jsx
@ -69,6 +69,17 @@ export default {
    };
  },

+  watch: {
+    visible(val) {
+      if (val) {
+        this.destroyPopup = false;
+      }
+      this.$nextTick(() => {
+        this.updatedCallback(!val);
+      });
+    },
+  },
+
  // private inTransition: boolean;
  // private titleId: string;
  // private openTime: number;
@ -88,17 +99,6 @@ export default {
      this.updatedCallback(false);
    });
  },
-
-  watch: {
-    visible(val) {
-      if (val) {
-        this.destroyPopup = false;
-      }
-      this.$nextTick(() => {
-        this.updatedCallback(!val);
-      });
-    },
-  },
  beforeDestroy() {
    if (this.visible || this.inTransition) {
      this.removeScrollingEffect();
--- a/Show More
+++ b/Show More