feat: update comment、divider、grid

components/cascader/index.jsx

@@ -381,8 +381,8 @@ const Cascader = {
     } = props;
     const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
     const renderEmpty = (
-      this.configProvider.renderEmptyComponent &&
-      this.configProvider.renderEmptyComponent()
+      this.configProvider.renderEmpty &&
+      this.configProvider.renderEmpty()
     ) || ConfigConsumerProps.renderEmpty;
     const prefixCls = getPrefixCls('cascader', customizePrefixCls);
     const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);

components/comment/index.jsx

@@ -1,5 +1,6 @@
 import PropsTypes from '../_util/vue-types';
 import { initDefaultProps, getComponentFromProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 export const CommentProps = {
   actions: PropsTypes.array,
@@ -17,9 +18,10 @@ export const CommentProps = {
 
 const Comment = {
   name: 'AComment',
-  props: initDefaultProps(CommentProps, {
-    prefixCls: 'ant-comment',
-  }),
+  props: CommentProps,
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   methods: {
     getAction(actions) {
       if (!actions || !actions.length) {
@@ -36,7 +38,10 @@ const Comment = {
   },
 
   render() {
-    const { prefixCls } = this.$props;
+    const { prefixCls: customizePrefixCls } = this.$props;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('comment', customizePrefixCls);
 
     const actions = getComponentFromProp(this, 'actions');
     const author = getComponentFromProp(this, 'author');

components/config-provider/index.jsx

@@ -1,7 +1,18 @@
+import Vue from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import defaultRenderEmpty from './renderEmpty';
 
+function getWatch(keys = []) {
+  const watch = {};
+  keys.forEach(k => {
+    watch[k] = function() {
+      this._proxyVm._data[k] = value;
+    };
+  });
+  return watch;
+}
+
 const ConfigProvider = {
   name: 'AConfigProvider',
   props: {
@@ -12,10 +23,27 @@ const ConfigProvider = {
     autoInsertSpaceInButton: PropTypes.bool,
   },
   provide() {
+    const _self = this;
+    this._proxyVm = new Vue({
+      data() {
+        return {
+          ..._self.$props,
+          getPrefixCls: _self.getPrefixCls,
+          renderEmpty: _self.renderEmptyComponent,
+        };
+      },
+    });
     return {
-      configProvider: this,
+      configProvider: this._proxyVm._data,
     };
   },
+  watch: {
+    ...getWatch([
+      'prefixCls',
+      'csp',
+      'autoInsertSpaceInButton',
+    ]),
+  },
   methods: {
     renderEmptyComponent() {
       const customRender = (this.$scopedSlots && this.$scopedSlots['renderEmpty']) || this.$slots['renderEmpty'];

components/divider/index.jsx

@@ -1,30 +1,33 @@
 import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
+
 const Divider = {
   name: 'ADivider',
   props: {
-    prefixCls: PropTypes.string.def('ant'),
+    prefixCls: PropTypes.string,
     type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'),
     dashed: PropTypes.bool,
     orientation: PropTypes.oneOf(['left', 'right']),
   },
-  computed: {
-    classString() {
-      const { prefixCls, type, $slots, dashed, orientation = '' } = this;
-      const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
-
-      return {
-        [`${prefixCls}-divider`]: true,
-        [`${prefixCls}-divider-${type}`]: true,
-        [`${prefixCls}-divider-with-text${orientationPrefix}`]: $slots.default,
-        [`${prefixCls}-divider-dashed`]: !!dashed,
-      };
-    },
+  inject: {
+    configProvider: { default: () => ({}) },
   },
   render() {
-    const { classString, prefixCls, $slots } = this;
+    const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = '' } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('divider', customizePrefixCls);
+    const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
+
+    const classString = {
+      [prefixCls]: true,
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-with-text${orientationPrefix}`]: $slots.default,
+      [`${prefixCls}-dashed`]: !!dashed,
+    };
+
     return (
       <div class={classString}>
-        {$slots.default && <span class={`${prefixCls}-divider-inner-text`}>{$slots.default}</span>}
+        {$slots.default && <span class={`${prefixCls}-inner-text`}>{$slots.default}</span>}
       </div>
     );
   },

components/grid/Col.jsx

@@ -1,4 +1,5 @@
 import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
 
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 
@@ -31,6 +32,7 @@ export default {
   name: 'ACol',
   props: ColProps,
   inject: {
+    configProvider: { default: () => ({}) },
     rowContext: {
       default: () => null,
     },
@@ -42,12 +44,15 @@ export default {
       offset,
       push,
       pull,
-      prefixCls = 'ant-col',
+      prefixCls: customizePrefixCls,
       $slots,
       $attrs,
       $listeners,
       rowContext,
     } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('col', customizePrefixCls);
+
     let sizeClassObj = {};
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
       let sizeProps = {};

components/grid/Row.jsx

@@ -1,5 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
+import { ConfigConsumerProps } from '../config-provider';
+
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
 let enquire = null;
@@ -56,6 +58,9 @@ export default {
       rowContext: this,
     };
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     return {
       screens: {},
@@ -113,7 +118,10 @@ export default {
   },
 
   render() {
-    const { type, justify, align, prefixCls = 'ant-row', $slots } = this;
+    const { type, justify, align, prefixCls: customizePrefixCls, $slots } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('row', customizePrefixCls);
+
     const gutter = this.getGutter();
     const classes = {
       [prefixCls]: !type,