From 61b8cf2dec523eafd2b6db5370906aadd0d866de Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 18 Mar 2021 09:35:31 +0800
Subject: [PATCH] feat(Sticky): add change event (#8374)

---
 src/sticky/README.md          |  7 ++++---
 src/sticky/README.zh-CN.md    |  7 ++++---
 src/sticky/Sticky.tsx         |  8 +++++++-
 src/sticky/test/index.spec.js | 19 +++++++++++++++++++
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/sticky/README.md b/src/sticky/README.md
index 622915c0d..085344814 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -69,9 +69,10 @@ export default {
 
 ### Events
 
-| Event  | Description            | Arguments                      |
-| ------ | ---------------------- | ------------------------------ |
-| scroll | Emitted when scrolling | object: { scrollTop, isFixed } |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change `v3.0.10` | Emitted when sticky status changed | _isFixed: boolean_ |
+| scroll | Emitted when scrolling | _{ scrollTop: number, isFixed: boolean }_ |
 
 ### Less Variables
 
diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md
index 2d6ff9b6c..0bf028513 100644
--- a/src/sticky/README.zh-CN.md
+++ b/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 }_ |
 
 ### 样式变量
 
diff --git a/src/sticky/Sticky.tsx b/src/sticky/Sticky.tsx
index 50ee38225..043ec39b6 100644
--- a/src/sticky/Sticky.tsx
+++ b/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);
 
diff --git a/src/sticky/test/index.spec.js b/src/sticky/test/index.spec.js
index 5328af18c..6a735297b 100644
--- a/src/sticky/test/index.spec.js
+++ b/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();
+});