diff --git a/components/affix/index.jsx b/components/affix/index.jsx index d7019d017..2cb4519b7 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -1,3 +1,4 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; import omit from 'omit.js'; @@ -5,7 +6,6 @@ import ResizeObserver from '../vc-resize-observer'; import BaseMixin from '../_util/BaseMixin'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import { ConfigConsumerProps } from '../config-provider'; -import Base from '../base'; import warning from '../_util/warning'; import { addObserveTarget, @@ -31,7 +31,7 @@ const AffixProps = { /** 固定状态改变时触发的回调函数 */ // onChange?: (affixed?: boolean) => void; /** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */ - target: PropTypes.func.def(getDefaultTarget), + target: PropTypes.func.def(() => getDefaultTarget), prefixCls: PropTypes.string, }; const AffixStatus = { @@ -42,8 +42,10 @@ const Affix = { name: 'AAffix', props: AffixProps, mixins: [BaseMixin], - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, data() { return { @@ -238,9 +240,7 @@ const Affix = { [getPrefixCls('affix', prefixCls)]: affixStyle, }); - const props = { - attrs: omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']), - }; + const props = omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']); return ( { @@ -249,7 +249,7 @@ const Affix = { > - {$slots.default} + {$slots.default && $slots.default()} @@ -258,9 +258,8 @@ const Affix = { }; /* istanbul ignore next */ -Affix.install = function(Vue) { - Vue.use(Base); - Vue.component(Affix.name, Affix); +Affix.install = function(app) { + app.component(Affix.name, Affix); }; export default Affix; diff --git a/components/vc-resize-observer/index.jsx b/components/vc-resize-observer/index.jsx index eb0c928be..7e3a3e548 100644 --- a/components/vc-resize-observer/index.jsx +++ b/components/vc-resize-observer/index.jsx @@ -78,7 +78,7 @@ const VueResizeObserver = { }, render() { - return this.$slots.default[0]; + return this.$slots.default && this.$slots.default()[0]; }, }; diff --git a/examples/App.vue b/examples/App.vue index 70406577c..c4433e844 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,80 +1,26 @@ - - Open - - - - {}"> - hahah - - - - Two-level drawer + + + Affix top - - - This is two-level drawer - - - - - Cancel - - - Submit - - - + + + + + Affix bottom + + + diff --git a/examples/index.js b/examples/index.js index d37b62cde..c7f60ce72 100644 --- a/examples/index.js +++ b/examples/index.js @@ -3,12 +3,13 @@ import { createApp } from 'vue'; import App from './App.vue'; import Button from 'ant-design-vue/button'; import Drawer from 'ant-design-vue/drawer'; +import Affix from 'ant-design-vue/affix'; import ConfigProvider from 'ant-design-vue/config-provider'; -import 'ant-design-vue/button/style/index.less'; -import 'ant-design-vue/drawer/style/index.less'; +import 'ant-design-vue/style.js'; createApp(App) .use(Button) .use(ConfigProvider) .use(Drawer) + .use(Affix) .mount('#app');