From 8cb73bf5049309752e85deeadd815b5592234849 Mon Sep 17 00:00:00 2001
From: cunzaizhuyi <877824709@qq.com>
Date: Sun, 18 Jun 2023 21:23:28 +0800
Subject: [PATCH] docs(Button): add animated button demo (#11995)

* chore(Button): add animation button demo

* fix: npm run test

* chore(Button): modify text

* chore: add space
---
 packages/vant/src/button/README.md            | 24 ++++++++++++++
 packages/vant/src/button/README.zh-CN.md      | 26 +++++++++++++++
 packages/vant/src/button/demo/index.vue       | 27 ++++++++++++++++
 .../test/__snapshots__/demo-ssr.spec.ts.snap  | 32 +++++++++++++++++++
 .../test/__snapshots__/demo.spec.ts.snap      | 26 +++++++++++++++
 5 files changed, 135 insertions(+)

diff --git a/packages/vant/src/button/README.md b/packages/vant/src/button/README.md
index d0613e80b..8af1334c0 100644
--- a/packages/vant/src/button/README.md
+++ b/packages/vant/src/button/README.md
@@ -109,6 +109,30 @@ app.use(Button);
 </van-button>
 ```
 
+### Animated Button
+
+```html
+<van-button type="danger" round>
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="2000"
+    :touchable="false"
+    :show-indicators="false"
+  >
+    <van-swipe-item>Do Task</van-swipe-item>
+    <van-swipe-item>Lottery</van-swipe-item>
+  </van-swipe>
+</van-button>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props
diff --git a/packages/vant/src/button/README.zh-CN.md b/packages/vant/src/button/README.zh-CN.md
index c043350a6..b5884d886 100644
--- a/packages/vant/src/button/README.zh-CN.md
+++ b/packages/vant/src/button/README.zh-CN.md
@@ -131,6 +131,32 @@ app.use(Button);
 </van-button>
 ```
 
+### 动画按钮
+
+搭配 Button 和 Swipe 组件，可以实现垂直滚动的动画按钮效果。
+
+```html
+<van-button type="danger" round>
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="2000"
+    :touchable="false"
+    :show-indicators="false"
+  >
+    <van-swipe-item>做任务</van-swipe-item>
+    <van-swipe-item>抽大奖</van-swipe-item>
+  </van-swipe>
+</van-button>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props
diff --git a/packages/vant/src/button/demo/index.vue b/packages/vant/src/button/demo/index.vue
index 12646da33..304dc2582 100644
--- a/packages/vant/src/button/demo/index.vue
+++ b/packages/vant/src/button/demo/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import VanButton from '..';
+import VanSwipe from '../../swipe';
+import VanSwipeItem from '../../swipe-item';
 import { cdnURL, useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
@@ -31,6 +33,9 @@ const t = useTranslate({
     pure: '单色按钮',
     gradient: '渐变色按钮',
     blockElement: '块级元素',
+    animatedButton: '动画按钮',
+    doTask: '做任务',
+    lottery: '抽大奖',
   },
   'en-US': {
     type: 'Type',
@@ -60,6 +65,9 @@ const t = useTranslate({
     pure: 'Pure',
     gradient: 'Gradient',
     blockElement: 'Block Element',
+    animatedButton: 'Animated Button',
+    doTask: 'Do Task',
+    lottery: 'Lottery',
   },
 });
 </script>
@@ -140,6 +148,21 @@ const t = useTranslate({
       :text="t('gradient')"
     />
   </demo-block>
+
+  <demo-block :title="t('animatedButton')">
+    <van-button type="danger" round>
+      <van-swipe
+        vertical
+        class="notice-swipe"
+        :autoplay="2000"
+        :touchable="false"
+        :show-indicators="false"
+      >
+        <van-swipe-item>{{ t('doTask') }}</van-swipe-item>
+        <van-swipe-item>{{ t('lottery') }}</van-swipe-item>
+      </van-swipe>
+    </van-button>
+  </demo-block>
 </template>
 
 <style lang="less">
@@ -167,4 +190,8 @@ const t = useTranslate({
     margin-bottom: var(--van-padding-sm);
   }
 }
+.notice-swipe {
+  height: 40px;
+  line-height: 40px;
+}
 </style>
diff --git a/packages/vant/src/button/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/button/test/__snapshots__/demo-ssr.spec.ts.snap
index 1b44259cb..eeb36e2ab 100644
--- a/packages/vant/src/button/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/button/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -420,4 +420,36 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </button>
 </div>
+<div>
+  <!--[-->
+  <button type="button"
+          class="van-button van-button--danger van-button--normal van-button--round"
+          style
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        <!--[-->
+        <div class="van-swipe notice-swipe">
+          <div style="transition-duration:500ms;transform:translateY(0px);"
+               class="van-swipe__track van-swipe__track--vertical"
+          >
+            <!--[-->
+            <div class="van-swipe-item"
+                 style
+            >
+              <!--[-->
+              Do Task
+            </div>
+            <div class="van-swipe-item"
+                 style
+            >
+              <!--[-->
+              Lottery
+            </div>
+          </div>
+        </div>
+      </span>
+    </div>
+  </button>
+</div>
 `;
diff --git a/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap
index 0967a18c3..55156b822 100644
--- a/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap
@@ -356,4 +356,30 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </button>
 </div>
+<div>
+  <button type="button"
+          class="van-button van-button--danger van-button--normal van-button--round"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        <div class="van-swipe notice-swipe">
+          <div style="transition-duration: 0ms; transform: translateY(0px); height: 200px;"
+               class="van-swipe__track van-swipe__track--vertical"
+          >
+            <div class="van-swipe-item"
+                 style="height: 100px;"
+            >
+              Do Task
+            </div>
+            <div class="van-swipe-item"
+                 style="height: 100px;"
+            >
+              Lottery
+            </div>
+          </div>
+        </div>
+      </span>
+    </div>
+  </button>
+</div>
 `;