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');