Repository: Tencent/tdesign-mobile-vue
Pull request #438 (2022-10-27 09:41:26)

docs(sticky): update docs and demo
### 🤔 这个 PR 的性质是？

- [x] 演示代码改进


### 🔗 相关 Issue

#413 

### 📝 更新日志

- feat(Sticky): 更新示例代码



Patch:
diff --git a/src/sticky/demos/base.vue b/src/sticky/demos/base.vue
index 8cd89139..844c6a49 100644
--- a/src/sticky/demos/base.vue
+++ b/src/sticky/demos/base.vue
@@ -1,5 +1,18 @@
 <template>
-  <t-sticky offset-top="50">
-    <t-button>吸顶按钮</t-button>
-  </t-sticky>
+  <div class="sticky-demo">
+    <t-sticky :z-index="50">
+      <t-button theme="primary" class="custom-common-button">基础吸顶</t-button>
+    </t-sticky>
+  </div>
 </template>
+
+<style lang="less" scoped>
+.sticky-demo {
+  padding-left: 16px;
+}
+.custom-common-button {
+  color: #fff;
+  width: 104px;
+  height: 44px;
+}
+</style>
diff --git a/src/sticky/demos/container.vue b/src/sticky/demos/container.vue
new file mode 100644
index 00000000..c0df5f5c
--- /dev/null
+++ b/src/sticky/demos/container.vue
@@ -0,0 +1,29 @@
+<template>
+  <div id="container" class="sticky-demo">
+    <t-sticky container="#container" @scroll="onScroll">
+      <t-button class="custom-common-button green-button">指定容器</t-button>
+    </t-sticky>
+  </div>
+</template>
+<script setup lang="ts">
+const onScroll = (context: { scrollTop: number; isFixed: boolean }) => {
+  console.log(context);
+};
+</script>
+
+<style lang="less" scoped>
+.sticky-demo {
+  background: white;
+  height: 200px;
+  padding-left: 250px;
+}
+.custom-common-button {
+  color: #fff;
+  width: 104px;
+  height: 44px;
+}
+.green-button {
+  background-color: rgba(0, 168, 112, 1) !important;
+  color: #fff !important;
+}
+</style>
diff --git a/src/sticky/demos/mobile.vue b/src/sticky/demos/mobile.vue
index cc5e4c03..fe024b54 100644
--- a/src/sticky/demos/mobile.vue
+++ b/src/sticky/demos/mobile.vue
@@ -1,45 +1,27 @@
 <template>
-  <div class="tdesign-mobile-demo sticky-demo">
-    <h1 class="title">Sticky 吸顶容器</h1>
+  <div class="tdesign-mobile-demo sticky-demo-container">
+    <h1 class="title">Sticky 吸顶</h1>
     <p class="summary">用于常驻页面顶部的信息、操作展示。</p>
-    <tdesign-demo-block summary="01 基础吸顶">
-      <t-sticky :z-index="5">
-        <t-button theme="primary">吸顶按钮</t-button>
-      </t-sticky>
+    <tdesign-demo-block summary="基础吸顶">
+      <BaseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="02 吸顶距离">
-      <div class="block-2">
-        <t-sticky :offset-top="50">
-          <t-button theme="danger">吸顶按钮</t-button>
-        </t-sticky>
-      </div>
+    <tdesign-demo-block summary="吸顶距离">
+      <OffsetTopDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="03 指定容器">
-      <div ref="container" class="block-3">
-        <t-sticky container=".block-3" @scroll="onScroll">
-          <t-button>吸顶按钮</t-button>
-        </t-sticky>
-      </div>
+    <tdesign-demo-block summary="指定容器">
+      <ContainerDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script setup lang="ts">
-const onScroll = (context: { scrollTop: number; isFixed: boolean }) => {
-  console.log(context);
-};
+import BaseDemo from './base.vue';
+import OffsetTopDemo from './offsetTop.vue';
+import ContainerDemo from './container.vue';
 </script>
 
 <style lang="less" scoped>
-.sticky-demo {
+.sticky-demo-container {
   height: 1500px;
 }
-.block-2 {
-  padding-left: 120px;
-}
-.block-3 {
-  background: white;
-  height: 200px;
-  padding-left: 250px;
-}
 </style>
diff --git a/src/sticky/demos/offsetTop.vue b/src/sticky/demos/offsetTop.vue
new file mode 100644
index 00000000..8386b056
--- /dev/null
+++ b/src/sticky/demos/offsetTop.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="sticky-demo">
+    <t-sticky :offset-top="50">
+      <t-button theme="danger" class="custom-common-button">吸顶距离</t-button>
+    </t-sticky>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.sticky-demo {
+  padding-left: 120px;
+}
+.custom-common-button {
+  color: #fff;
+  width: 104px;
+  height: 44px;
+}
+</style>


Test patch:
diff --git a/src/sticky/__test__/__snapshots__/demo.test.jsx.snap b/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
index 02c4ce1d..c5341f32 100644
--- a/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/sticky/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,43 +2,87 @@
 
 exports[`Sticky > Sticky baseVue demo works fine 1`] = `
 <div
-  class="t-sticky"
-  style="height: 0px;"
+  class="sticky-demo"
+  data-v-4a742626=""
 >
   <div
-    class="t-sticky__content"
-    style="z-index: 99; position: fixed; top: 50px;"
+    class="t-sticky"
+    data-v-4a742626=""
+    style="height: 0px;"
   >
-    
-    <button
-      aria-disabled="false"
-      class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
-      role="button"
+    <div
+      class="t-sticky__content"
+      style="z-index: 50; position: fixed; top: 0px;"
     >
-      <!---->
-      <span
-        class="t-button__text"
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle custom-common-button"
+        data-v-4a742626=""
+        role="button"
       >
-        
-        吸顶按钮
-        
-      </span>
-    </button>
-    
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          基础吸顶
+          
+        </span>
+      </button>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Sticky > Sticky containerVue demo works fine 1`] = `
+<div
+  class="sticky-demo"
+  data-v-046295d6=""
+  id="container"
+>
+  <div
+    class="t-sticky"
+    data-v-046295d6=""
+    style="height: 0px;"
+  >
+    <div
+      class="t-sticky__content"
+      style="z-index: 99; position: fixed; top: 0px;"
+    >
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle custom-common-button green-button"
+        data-v-046295d6=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          指定容器
+          
+        </span>
+      </button>
+      
+    </div>
   </div>
 </div>
 `;
 
 exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo sticky-demo"
+  class="tdesign-mobile-demo sticky-demo-container"
   data-v-3246353e=""
 >
   <h1
     class="title"
     data-v-3246353e=""
   >
-    Sticky 吸顶容器
+    Sticky 吸顶
   </h1>
   <p
     class="summary"
@@ -54,35 +98,41 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      01 基础吸顶
+      基础吸顶
     </p>
     
     <div
-      class="t-sticky"
+      class="sticky-demo"
       data-v-3246353e=""
-      style="height: 0px;"
+      data-v-4a742626=""
     >
       <div
-        class="t-sticky__content"
-        style="z-index: 5; position: fixed; top: 0px;"
+        class="t-sticky"
+        data-v-4a742626=""
+        style="height: 0px;"
       >
-        
-        <button
-          aria-disabled="false"
-          class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle"
-          data-v-3246353e=""
-          role="button"
+        <div
+          class="t-sticky__content"
+          style="z-index: 50; position: fixed; top: 0px;"
         >
-          <!---->
-          <span
-            class="t-button__text"
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--primary t-button--shape-rectangle custom-common-button"
+            data-v-4a742626=""
+            role="button"
           >
-            
-            吸顶按钮
-            
-          </span>
-        </button>
-        
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              基础吸顶
+              
+            </span>
+          </button>
+          
+        </div>
       </div>
     </div>
     
@@ -95,16 +145,17 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      02 吸顶距离
+      吸顶距离
     </p>
     
     <div
-      class="block-2"
+      class="sticky-demo"
       data-v-3246353e=""
+      data-v-76d3d054=""
     >
       <div
         class="t-sticky"
-        data-v-3246353e=""
+        data-v-76d3d054=""
         style="height: 0px;"
       >
         <div
@@ -114,8 +165,8 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
-            data-v-3246353e=""
+            class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle custom-common-button"
+            data-v-76d3d054=""
             role="button"
           >
             <!---->
@@ -123,7 +174,7 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
               class="t-button__text"
             >
               
-              吸顶按钮
+              吸顶距离
               
             </span>
           </button>
@@ -141,16 +192,18 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
     <p
       class="tdesign-mobile-demo-block__summary"
     >
-      03 指定容器
+      指定容器
     </p>
     
     <div
-      class="block-3"
+      class="sticky-demo"
+      data-v-046295d6=""
       data-v-3246353e=""
+      id="container"
     >
       <div
         class="t-sticky"
-        data-v-3246353e=""
+        data-v-046295d6=""
         style="height: 0px;"
       >
         <div
@@ -160,8 +213,8 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
           
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
-            data-v-3246353e=""
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle custom-common-button green-button"
+            data-v-046295d6=""
             role="button"
           >
             <!---->
@@ -169,7 +222,7 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
               class="t-button__text"
             >
               
-              吸顶按钮
+              指定容器
               
             </span>
           </button>
@@ -181,3 +234,39 @@ exports[`Sticky > Sticky mobileVue demo works fine 1`] = `
   </div>
 </div>
 `;
+
+exports[`Sticky > Sticky offsetTopVue demo works fine 1`] = `
+<div
+  class="sticky-demo"
+  data-v-76d3d054=""
+>
+  <div
+    class="t-sticky"
+    data-v-76d3d054=""
+    style="height: 0px;"
+  >
+    <div
+      class="t-sticky__content"
+      style="z-index: 99; position: fixed; top: 50px;"
+    >
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle custom-common-button"
+        data-v-76d3d054=""
+        role="button"
+      >
+        <!---->
+        <span
+          class="t-button__text"
+        >
+          
+          吸顶距离
+          
+        </span>
+      </button>
+      
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/sticky/__test__/demo.test.jsx b/src/sticky/__test__/demo.test.jsx
index 99b9f273..ea0daa5d 100644
--- a/src/sticky/__test__/demo.test.jsx
+++ b/src/sticky/__test__/demo.test.jsx
@@ -4,11 +4,15 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/sticky/demos/base.vue';
+import containerVue from '@/sticky/demos/container.vue';
 import mobileVue from '@/sticky/demos/mobile.vue';
+import offsetTopVue from '@/sticky/demos/offsetTop.vue';
 
 const mapper = {
   baseVue,
+  containerVue,
   mobileVue,
+  offsetTopVue,
 };
 
 describe('Sticky', () => {