diff --git a/components/col/index.js b/components/col/index.js
index b55bbc9727..fd37d7b899 100644
--- a/components/col/index.js
+++ b/components/col/index.js
@@ -1,9 +1,7 @@
import { Col } from '../grid';
-import Base from '../base';
/* istanbul ignore next */
-Col.install = function(Vue) {
- Vue.use(Base);
- Vue.component(Col.name, Col);
+Col.install = function(app) {
+ app.component(Col.name, Col);
};
export default Col;
diff --git a/components/grid/Col.jsx b/components/grid/Col.jsx
index 06520e9227..68b604b067 100644
--- a/components/grid/Col.jsx
+++ b/components/grid/Col.jsx
@@ -1,6 +1,6 @@
+import { inject } from 'vue';
import PropTypes from '../_util/vue-types';
import { ConfigConsumerProps } from '../config-provider';
-import { getListeners } from '../_util/props-util';
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
@@ -32,11 +32,11 @@ export const ColProps = {
export default {
name: 'ACol',
props: ColProps,
- inject: {
- configProvider: { default: () => ConfigConsumerProps },
- rowContext: {
- default: () => null,
- },
+ setup() {
+ return {
+ configProvider: inject('configProvider', ConfigConsumerProps),
+ rowContext: inject('rowContext', null),
+ };
},
render() {
const {
@@ -82,7 +82,6 @@ export default {
...sizeClassObj,
};
const divProps = {
- on: getListeners(this),
class: classes,
style: {},
};
@@ -105,6 +104,6 @@ export default {
};
}
}
- return
{$slots.default}
;
+ return {$slots.default && $slots.default()}
;
},
};
diff --git a/components/grid/Row.jsx b/components/grid/Row.jsx
index 01d0c38bc4..a5fb2e4adf 100644
--- a/components/grid/Row.jsx
+++ b/components/grid/Row.jsx
@@ -1,3 +1,4 @@
+import { inject, provide, reactive } from 'vue';
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import { ConfigConsumerProps } from '../config-provider';
@@ -20,20 +21,24 @@ export default {
...RowProps,
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
},
- provide() {
+ setup() {
+ const rowContext = reactive({
+ getGutter: undefined,
+ });
+ provide('rowContext', rowContext);
return {
- rowContext: this,
+ configProvider: inject('configProvider', ConfigConsumerProps),
+ rowContext,
};
},
- inject: {
- configProvider: { default: () => ConfigConsumerProps },
- },
data() {
return {
screens: {},
};
},
-
+ created() {
+ this.rowContext.getGutter = this.getGutter;
+ },
mounted() {
this.$nextTick(() => {
this.token = ResponsiveObserve.subscribe(screens => {
@@ -101,7 +106,7 @@ export default {
};
return (
- {$slots.default}
+ {$slots.default && $slots.default()}
);
},
diff --git a/components/row/index.js b/components/row/index.js
index 79c2455137..2d818e0558 100644
--- a/components/row/index.js
+++ b/components/row/index.js
@@ -1,10 +1,8 @@
import { Row } from '../grid';
-import Base from '../base';
/* istanbul ignore next */
-Row.install = function(Vue) {
- Vue.use(Base);
- Vue.component(Row.name, Row);
+Row.install = function(app) {
+ app.component(Row.name, Row);
};
export default Row;
diff --git a/examples/index.js b/examples/index.js
index 6ec0cdff0e..d45b8d1173 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -17,6 +17,8 @@ import PageHeader from 'ant-design-vue/page-header';
import Skeleton from 'ant-design-vue/skeleton';
import Empty from 'ant-design-vue/empty';
import Timeline from 'ant-design-vue/timeline';
+import Col from 'ant-design-vue/col';
+import Row from 'ant-design-vue/row';
import Tooltip from 'ant-design-vue/tooltip';
import 'ant-design-vue/style.js';
@@ -37,5 +39,7 @@ createApp(App)
.use(Spin)
.use(Empty)
.use(Timeline)
+ .use(Col)
+ .use(Row)
.use(Tooltip)
.mount('#app');