feat(Sticky): add change event (#8374)

src/sticky/README.md

@@ -69,9 +69,10 @@ export default {
 
 ### Events
 
-| Event  | Description            | Arguments                      |
+| Event | Description | Arguments |
-| ------ | ---------------------- | ------------------------------ |
+| --- | --- | --- |
-| scroll | Emitted when scrolling | object: { scrollTop, isFixed } |
+| change `v3.0.10` | Emitted when sticky status changed | _isFixed: boolean_ |
+| scroll | Emitted when scrolling | _{ scrollTop: number, isFixed: boolean }_ |
 
 ### Less Variables
 

src/sticky/README.zh-CN.md

@@ -81,9 +81,10 @@ export default {
 
 ### Events
 
-| 事件名 | 说明       | 回调参数                                       |
+| 事件名 | 说明 | 回调参数 |
-| ------ | ---------- | ---------------------------------------------- |
+| --- | --- | --- |
-| scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
+| change `v3.0.10` | 当吸顶状态改变时触发 | _isFixed: boolean_ |
+| scroll | 滚动时触发 | _{ scrollTop: number, isFixed: boolean }_ |
 
 ### 样式变量
 

src/sticky/Sticky.tsx

@@ -1,5 +1,6 @@
 import {
   ref,
+  watch,
   computed,
   PropType,
   reactive,
@@ -44,7 +45,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['scroll'],
+  emits: ['scroll', 'change'],
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
@@ -135,6 +136,11 @@ export default defineComponent({
       emitScroll(scrollTop);
     };
 
+    watch(
+      () => state.fixed,
+      (value) => emit('change', value)
+    );
+
     useEventListener('scroll', onScroll, { target: scrollParent });
     useVisibilityChange(root, onScroll);
 

src/sticky/test/index.spec.js

@@ -330,3 +330,22 @@ test('should emit scroll event when visibility changed', async () => {
 
   window.IntersectionObserver = originIntersectionObserver;
 });
+
+test('should emit change event when sticky status changed', async () => {
+  const wrapper = mount(Sticky, {
+    attrs: {
+      style: 'height: 10px',
+    },
+  });
+  const mockStickyRect = jest
+    .spyOn(wrapper.element, 'getBoundingClientRect')
+    .mockReturnValue({
+      top: -100,
+      bottom: -90,
+    });
+
+  await mockScrollTop(100);
+  expect(wrapper.emitted('change')[0]).toEqual([true]);
+
+  mockStickyRect.mockRestore();
+});