feat: update affix

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: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     return {
@@ -238,9 +240,7 @@ const Affix = {
       [getPrefixCls('affix', prefixCls)]: affixStyle,
     });
 
-    const props = {
+    const props = omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
-      attrs: omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']),
-    };
     return (
       <ResizeObserver
         onResize={() => {
@@ -249,7 +249,7 @@ const Affix = {
       >
         <div {...props} style={placeholderStyle} ref="placeholderNode">
           <div class={className} ref="fixedNode" style={affixStyle}>
-            {$slots.default}
+            {$slots.default && $slots.default()}
           </div>
         </div>
       </ResizeObserver>
@@ -258,9 +258,8 @@ const Affix = {
 };
 
 /* istanbul ignore next */
-Affix.install = function(Vue) {
+Affix.install = function(app) {
-  Vue.use(Base);
+  app.component(Affix.name, Affix);
-  Vue.component(Affix.name, Affix);
 };
 
 export default Affix;

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];
   },
 };
 

examples/App.vue

@@ -1,80 +1,26 @@
 <template>
   <div>
-    <a-button type="primary" @click="showDrawer">
+    <a-affix :offset-top="top">
-      Open
+      <a-button type="primary" @click="top += 10">
+        Affix top
       </a-button>
-    <a-drawer
+    </a-affix>
-      title="Multi-level drawer"
+    <br />
-      width="520"
+    <a-affix :offset-bottom="bottom">
-      :closable="false"
+      <a-button type="primary" @click="bottom += 10">
-      :visible="visible"
+        Affix bottom
-      style="color: red"
-      @close="onClose"
-    >
-      <template v-slot:handle>
-        <a-button @click="() => {}">
-          hahah
       </a-button>
-      </template>
+    </a-affix>
-      <a-button type="primary" @click="showChildrenDrawer">
-        Two-level drawer
-      </a-button>
-      <a-drawer
-        title="Two-level Drawer"
-        width="320"
-        :closable="false"
-        :visible="childrenDrawer"
-        @close="onChildrenDrawerClose"
-      >
-        <a-button type="primary" @click="showChildrenDrawer">
-          This is two-level drawer
-        </a-button>
-      </a-drawer>
-      <div
-        :style="{
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-          borderTop: '1px solid #e8e8e8',
-          padding: '10px 16px',
-          textAlign: 'right',
-          left: 0,
-          background: '#fff',
-          borderRadius: '0 0 4px 4px',
-          boxSizing: 'border-box',
-        }"
-      >
-        <a-button style="marginRight: 8px" @click="onClose">
-          Cancel
-        </a-button>
-        <a-button type="primary" @click="onClose">
-          Submit
-        </a-button>
-      </div>
-    </a-drawer>
   </div>
 </template>
+
 <script>
 export default {
   data() {
     return {
-      visible: false,
+      top: 10,
-      childrenDrawer: false,
+      bottom: 10,
     };
   },
-  methods: {
-    showDrawer() {
-      this.visible = true;
-    },
-    onClose() {
-      this.visible = false;
-    },
-    showChildrenDrawer() {
-      this.childrenDrawer = true;
-    },
-    onChildrenDrawerClose() {
-      this.childrenDrawer = false;
-    },
-  },
 };
 </script>

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/style.js';
-import 'ant-design-vue/drawer/style/index.less';
 
 createApp(App)
   .use(Button)
   .use(ConfigProvider)
   .use(Drawer)
+  .use(Affix)
   .mount('#app');