From 6e1c1fb51c89109263d182fc0fb69fa8ed8d5fa2 Mon Sep 17 00:00:00 2001
From: wwlh200 <wwlh200@163.com>
Date: Wed, 9 Nov 2022 11:01:07 +0800
Subject: [PATCH 1/2] docs(swipe-cell): update docs and demo

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 413 ++++++++++++++++++
 src/swipe-cell/demos/bind.vue                 |  36 +-
 src/swipe-cell/demos/btns.vue                 |  31 +-
 src/swipe-cell/demos/content.vue              |  10 +-
 src/swipe-cell/demos/disabled.vue             |  22 +-
 src/swipe-cell/demos/event.vue                |  47 +-
 src/swipe-cell/demos/left-card.vue            |  16 +-
 src/swipe-cell/demos/left-more-menu.vue       |  17 +-
 src/swipe-cell/demos/left-one-menu.vue        |  16 +-
 src/swipe-cell/demos/left-two-menu.vue        |  39 +-
 src/swipe-cell/demos/mobile.vue               | 116 +++--
 src/swipe-cell/demos/right-menu.vue           |  16 +-
 12 files changed, 579 insertions(+), 200 deletions(-)

diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index 26e206614..b84df5a1f 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -2293,6 +2293,419 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      通过直接传入内容或者使用 slot#content 来渲染
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          <!---->
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            style="padding: 10px;"
+          >
+            直接写组件
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <div>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              role="button"
+              style="height: 100%;"
+              type="submit"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                收藏
+                
+              </span>
+            </button>
+          </div>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      是否启用滑动功能
+    </p>
+    
+    <div
+      class="t-cell t-cell--middle t-cell--bordered"
+    >
+      <div
+        class="t-cell__left-icon"
+      >
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        开关
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        
+        <span
+          class="t-switch"
+        >
+          <!--v-if-->
+          <span
+            class="t-switch__node"
+            style=""
+          />
+        </span>
+        
+      </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          <!---->
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              可以滑动
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              收藏
+              
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--base t-button--danger t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              删除
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      左右两侧都有菜单
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              选择
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              左右都有菜单
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <div>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                收藏
+                
+              </span>
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                删除
+                
+              </span>
+            </button>
+          </div>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      点击事件
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              选择
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              左右都有内容
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__note"
+            >
+              辅助信息
+            </div>
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--primary"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              编辑
+              
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              删除
+              
+            </span>
+          </button>
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
 </div>
 `;
 
diff --git a/src/swipe-cell/demos/bind.vue b/src/swipe-cell/demos/bind.vue
index 20fcf18b7..bf8676a55 100644
--- a/src/swipe-cell/demos/bind.vue
+++ b/src/swipe-cell/demos/bind.vue
@@ -14,33 +14,23 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 
 interface InitData {
   expanded: 'left' | 'right' | undefined;
 }
-export default defineComponent({
-  setup() {
-    const initData: InitData = reactive({
-      expanded: 'right',
-    });
-    const handleClick = () => {
-      Toast('click');
-    };
-    const handleChange = (value: InitData['expanded']) => {
-      initData.expanded = value;
-    };
-    const handleChangeSwitch = (value: boolean) => {
-      initData.expanded = value ? 'right' : undefined;
-    };
-    return {
-      initData,
-      handleClick,
-      handleChange,
-      handleChangeSwitch,
-    };
-  },
+const initData: InitData = reactive({
+  expanded: 'right',
 });
+const handleClick = () => {
+  Toast('click');
+};
+const handleChange = (value: InitData['expanded']) => {
+  initData.expanded = value;
+};
+const handleChangeSwitch = (value: boolean) => {
+  initData.expanded = value ? 'right' : undefined;
+};
 </script>
diff --git a/src/swipe-cell/demos/btns.vue b/src/swipe-cell/demos/btns.vue
index 10b9fbaf0..6caba2e5a 100644
--- a/src/swipe-cell/demos/btns.vue
+++ b/src/swipe-cell/demos/btns.vue
@@ -15,28 +15,19 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const initData = reactive({
-      showDialog: false,
-      disabled: false,
-    });
-    const handleClick = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const handleClickLeft = () => {
-      Toast('click');
-    };
-    return {
-      initData,
-      handleClick,
-      handleClickLeft,
-    };
-  },
+const initData = reactive({
+  showDialog: false,
+  disabled: false,
 });
+const handleClick = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const handleClickLeft = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/content.vue b/src/swipe-cell/demos/content.vue
index 6900672b7..3bd666eaa 100644
--- a/src/swipe-cell/demos/content.vue
+++ b/src/swipe-cell/demos/content.vue
@@ -14,12 +14,4 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    return {};
-  },
-});
-</script>
+<script setup lang="ts"></script>
diff --git a/src/swipe-cell/demos/disabled.vue b/src/swipe-cell/demos/disabled.vue
index 5c553ec71..fef0d3e59 100644
--- a/src/swipe-cell/demos/disabled.vue
+++ b/src/swipe-cell/demos/disabled.vue
@@ -13,21 +13,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const initData = reactive({
-      disabled: false,
-    });
-    const handleChange = (value: boolean) => {
-      initData.disabled = value;
-    };
-    return {
-      initData,
-      handleChange,
-    };
-  },
+const initData = reactive({
+  disabled: false,
 });
+const handleChange = (value: boolean) => {
+  initData.disabled = value;
+};
 </script>
diff --git a/src/swipe-cell/demos/event.vue b/src/swipe-cell/demos/event.vue
index 9d5f6a72a..dff32c896 100644
--- a/src/swipe-cell/demos/event.vue
+++ b/src/swipe-cell/demos/event.vue
@@ -9,36 +9,27 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const handleDelete = () => {
-      Toast.success('删除成功');
-    };
-    const initData = reactive({
-      btns: [
-        // 通过按钮对象传入onClick事件，按钮的onClick事件优先级大于swipe-cell组件上绑定的onClick事件
-        { text: '删除', theme: 'danger', onClick: handleDelete },
-        { text: '收藏', theme: 'default' },
-      ],
-    });
-    // 绑定在swipe-cell组件上面的onClick事件
-    const handleClick = (value: { action: SwipeActionItem; source: String }) => {
-      // 根据返回的action对象判断点击的按钮
-      Toast(JSON.stringify(value));
-    };
-    const handleClickLeft = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-      handleClickLeft,
-      initData,
-    };
-  },
+const handleDelete = () => {
+  Toast.success('删除成功');
+};
+const initData = reactive({
+  btns: [
+    // 通过按钮对象传入onClick事件，按钮的onClick事件优先级大于swipe-cell组件上绑定的onClick事件
+    { text: '删除', theme: 'danger', onClick: handleDelete },
+    { text: '收藏', theme: 'default' },
+  ],
 });
+// 绑定在swipe-cell组件上面的onClick事件
+const handleClick = (value: { action: SwipeActionItem; source: String }) => {
+  // 根据返回的action对象判断点击的按钮
+  Toast(JSON.stringify(value));
+};
+const handleClickLeft = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-card.vue b/src/swipe-cell/demos/left-card.vue
index 20feb10ba..3abe9ffe9 100644
--- a/src/swipe-cell/demos/left-card.vue
+++ b/src/swipe-cell/demos/left-card.vue
@@ -33,18 +33,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-more-menu.vue b/src/swipe-cell/demos/left-more-menu.vue
index 31241d5c3..d7a4d57eb 100644
--- a/src/swipe-cell/demos/left-more-menu.vue
+++ b/src/swipe-cell/demos/left-more-menu.vue
@@ -21,19 +21,10 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
-import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-one-menu.vue b/src/swipe-cell/demos/left-one-menu.vue
index 36c3a720c..9b12959f7 100644
--- a/src/swipe-cell/demos/left-one-menu.vue
+++ b/src/swipe-cell/demos/left-one-menu.vue
@@ -19,18 +19,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-two-menu.vue b/src/swipe-cell/demos/left-two-menu.vue
index 74ab9c4c4..3e420ef7d 100644
--- a/src/swipe-cell/demos/left-two-menu.vue
+++ b/src/swipe-cell/demos/left-two-menu.vue
@@ -11,32 +11,29 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
 interface InitData {
   btns: {}[];
 }
-export default defineComponent({
-  setup() {
-    const handleEdit = () => {
-      Toast.success(`编辑成功`);
-    };
-    const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const initData: InitData = reactive({
-      btns: [
-        { text: '编辑', className: 't-button--primary', onClick: handleEdit },
-        { text: '删除', className: 't-button--danger' },
-      ],
-    });
-    return {
-      initData,
-      handleClickBtns,
-    };
-  },
+const handleEdit = () => {
+  Toast.success(`编辑成功`);
+};
+
+const handleDelete = () => {
+  Toast.success(`删除成功`);
+};
+
+const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const initData: InitData = reactive({
+  btns: [
+    { text: '编辑', className: 't-button--primary', onClick: handleEdit },
+    { text: '删除', className: 't-button--danger', onClick: handleDelete },
+  ],
 });
 </script>
diff --git a/src/swipe-cell/demos/mobile.vue b/src/swipe-cell/demos/mobile.vue
index ec2f975b0..fa7f92c22 100644
--- a/src/swipe-cell/demos/mobile.vue
+++ b/src/swipe-cell/demos/mobile.vue
@@ -105,11 +105,58 @@
         </template>
       </t-swipe-cell>
     </tdesign-demo-block>
+    <tdesign-demo-block summary="通过直接传入内容或者使用 slot#content 来渲染">
+      <t-swipe-cell>
+        <template #content>
+          <div style="padding: 10px">使用slot#content</div>
+        </template>
+        <div style="padding: 10px">直接写组件</div>
+        <template #right>
+          <div>
+            <t-button type="primary" style="height: 100%">收藏</t-button>
+          </div>
+        </template>
+      </t-swipe-cell>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="是否启用滑动功能">
+      <t-cell title="开关">
+        <t-switch v-model="initData.disabled" @change="(value) => handleDisabledChange(value)"> </t-switch>
+      </t-cell>
+      <t-swipe-cell :disabled="initData.disabled">
+        <t-cell :title="initData.disabled ? '禁止滑动' : '可以滑动'"></t-cell>
+        <template #right>
+          <t-button theme="primary" style="height: 100%" size="small">收藏</t-button>
+          <t-button theme="danger" style="height: 100%" size="small">删除</t-button>
+        </template>
+      </t-swipe-cell>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="左右两侧都有菜单">
+      <t-swipe-cell>
+        <t-cell title="左右都有菜单"></t-cell>
+        <template #left>
+          <t-button theme="theme">选择</t-button>
+        </template>
+        <template #right>
+          <div>
+            <t-button theme="theme">收藏</t-button>
+            <t-button theme="danger">删除</t-button>
+          </div>
+        </template>
+      </t-swipe-cell>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="点击事件">
+      <t-swipe-cell :right="initData.btns" @click="handleClickBtns">
+        <t-cell title="左右都有内容" note="辅助信息"></t-cell>
+        <template #left>
+          <t-button @click="handleClick">选择</t-button>
+        </template>
+      </t-swipe-cell>
+    </tdesign-demo-block>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
@@ -118,38 +165,37 @@ interface InitData {
   btns: {}[];
   expanded: 'left' | 'right' | undefined;
 }
-export default defineComponent({
-  setup() {
-    const handleEdit = () => {
-      Toast.success(`编辑成功`);
-    };
-    const initData: InitData = reactive({
-      disabled: false,
-      btns: [
-        { text: '编辑', className: 't-button--primary', onClick: handleEdit },
-        { text: '删除', className: 't-button--danger' },
-      ],
-      expanded: 'right',
-    });
-    const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const handleClick = () => {
-      Toast('click');
-    };
-    const handleChange = (value: InitData['expanded']) => {
-      initData.expanded = value;
-    };
-    const handleChangeSwitch = (value: boolean) => {
-      initData.expanded = value ? 'right' : undefined;
-    };
-    return {
-      initData,
-      handleClick,
-      handleClickBtns,
-      handleChange,
-      handleChangeSwitch,
-    };
-  },
+const handleEdit = () => {
+  Toast.success(`编辑成功`);
+};
+
+const handleDelete = () => {
+  Toast.success(`删除成功`);
+};
+
+const initData: InitData = reactive({
+  disabled: false,
+  btns: [
+    { text: '编辑', className: 't-button--primary', onClick: handleEdit },
+    { text: '删除', className: 't-button--danger', onClick: handleDelete },
+  ],
+  expanded: 'right',
 });
+const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const handleClick = () => {
+  Toast('click');
+};
+const handleChange = (value: InitData['expanded']) => {
+  initData.expanded = value;
+};
+
+const handleDisabledChange = (value: InitData['disabled']) => {
+  initData.disabled = value;
+};
+
+const handleChangeSwitch = (value: boolean) => {
+  initData.expanded = value ? 'right' : undefined;
+};
 </script>
diff --git a/src/swipe-cell/demos/right-menu.vue b/src/swipe-cell/demos/right-menu.vue
index f05bb6ac2..f68a82097 100644
--- a/src/swipe-cell/demos/right-menu.vue
+++ b/src/swipe-cell/demos/right-menu.vue
@@ -17,18 +17,10 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>

From d6c241f86f190ebc84f5cceb4970f9a0b37685f8 Mon Sep 17 00:00:00 2001
From: wwlh200 <wwlh200@163.com>
Date: Thu, 10 Nov 2022 11:30:36 +0800
Subject: [PATCH 2/2] docs(swipe-cell): update docs and demo

---
 .../__test__/__snapshots__/demo.test.jsx.snap | 230 +++++++++++-------
 src/swipe-cell/demos/bind.vue                 |  24 +-
 src/swipe-cell/demos/btns.vue                 |   4 +-
 src/swipe-cell/demos/content.vue              |   4 +-
 src/swipe-cell/demos/disabled.vue             |   4 +-
 src/swipe-cell/demos/event.vue                |   4 +-
 src/swipe-cell/demos/left-card.vue            |  58 +++--
 src/swipe-cell/demos/left-one-menu.vue        |  34 ++-
 src/swipe-cell/demos/mobile.vue               | 212 ++--------------
 9 files changed, 219 insertions(+), 355 deletions(-)

diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index b84df5a1f..667c00d6f 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,125 +2,128 @@
 
 exports[`SwipeCell > SwipeCell bindVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    通过expanded实现父子组件联动
+  </p>
+  
   <div
-    class="tdesign-mobile-demo-block"
+    class="t-cell t-cell--middle t-cell--bordered"
   >
-    <!--v-if-->
-    <p
-      class="tdesign-mobile-demo-block__summary"
+    <div
+      class="t-cell__left-icon"
     >
-      通过expanded实现父子组件联动
-    </p>
-    
+      <!--v-if-->
+      <!--v-if-->
+    </div>
     <div
-      class="t-cell t-cell--middle t-cell--bordered"
+      class="t-cell__title"
     >
-      <div
-        class="t-cell__left-icon"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <div
-        class="t-cell__title"
+      开关
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      
+      <span
+        class="t-switch t-is-checked"
       >
-        开关
-        <!--v-if-->
         <!--v-if-->
-      </div>
+        <span
+          class="t-switch__node"
+          style=""
+        />
+      </span>
+      
+    </div>
+    <!--v-if-->
+  </div>
+  <div
+    class="t-swipe-cell"
+  >
+    <div
+      class="t-swipe-cell__wrapper"
+      style="transform: translate3d(0px,0,0);"
+    >
       <div
-        class="t-cell__note"
+        class="t-swipe-cell__left"
+        style="width: auto;"
       >
+        <!---->
         
-        <span
-          class="t-switch t-is-checked"
-        >
-          <!--v-if-->
-          <span
-            class="t-switch__node"
-            style=""
-          />
-        </span>
         
       </div>
-      <!--v-if-->
-    </div>
-    <div
-      class="t-swipe-cell"
-    >
       <div
-        class="t-swipe-cell__wrapper"
-        style="transform: translate3d(0px,0,0);"
+        class="t-swipe-cell__content"
       >
+        
         <div
-          class="t-swipe-cell__left"
-          style="width: auto;"
-        >
-          <!---->
-          
-          
-        </div>
-        <div
-          class="t-swipe-cell__content"
+          class="t-cell t-cell--middle t-cell--bordered"
         >
-          
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell__left-icon"
           >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
-            >
-              父子组件联动
-              <!--v-if-->
-              <!--v-if-->
-            </div>
             <!--v-if-->
             <!--v-if-->
           </div>
-          
+          <div
+            class="t-cell__title"
+          >
+            父子组件联动
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+          <!--v-if-->
         </div>
-        <div
-          class="t-swipe-cell__right"
-          style="width: auto;"
+        
+      </div>
+      <div
+        class="t-swipe-cell__right"
+        style="width: auto;"
+      >
+        
+        <button
+          aria-disabled="false"
+          class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+          role="button"
         >
-          
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
-            role="button"
+          <!---->
+          <span
+            class="t-button__text"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              删除
-              
-            </span>
-          </button>
-          
-          
-          
-        </div>
+            
+            删除
+            
+          </span>
+        </button>
+        
+        
+        
       </div>
     </div>
-    
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    左右两侧都有菜单
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -217,13 +220,21 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell contentVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    通过直接传入内容或者使用 slot#content 来渲染
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -279,13 +290,21 @@ exports[`SwipeCell > SwipeCell contentVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell disabledVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    是否启用滑动功能
+  </p>
+  
   <div
     class="t-cell t-cell--middle t-cell--bordered"
   >
@@ -400,13 +419,21 @@ exports[`SwipeCell > SwipeCell disabledVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    点击事件
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -507,13 +534,15 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  data-v-app=""
 >
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -683,6 +712,7 @@ exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
     </div>
     
   </div>
+  
 </div>
 `;
 
@@ -912,8 +942,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
 
 exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  data-v-app=""
 >
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1073,6 +1104,7 @@ exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
     </div>
     
   </div>
+  
 </div>
 `;
 
@@ -1290,6 +1322,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
   >
     用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
   </p>
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1449,6 +1482,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1640,6 +1675,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1855,6 +1892,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2024,6 +2063,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2183,6 +2224,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2672,7 +2714,7 @@ exports[`SwipeCell > SwipeCell 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 t-button--primary"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
             role="button"
             style="height: 100%;"
           >
@@ -2681,13 +2723,13 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               class="t-button__text"
             >
               
-              编辑
+              删除
               
             </span>
           </button>
           <button
             aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle t-button--danger"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
             role="button"
             style="height: 100%;"
           >
@@ -2696,7 +2738,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               class="t-button__text"
             >
               
-              删除
+              收藏
               
             </span>
           </button>
diff --git a/src/swipe-cell/demos/bind.vue b/src/swipe-cell/demos/bind.vue
index bf8676a55..9a32205bf 100644
--- a/src/swipe-cell/demos/bind.vue
+++ b/src/swipe-cell/demos/bind.vue
@@ -1,17 +1,15 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="通过expanded实现父子组件联动">
-      <t-cell title="开关">
-        <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
-      </t-cell>
-      <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
-        <t-cell title="父子组件联动" />
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+  <tdesign-demo-block summary="通过expanded实现父子组件联动">
+    <t-cell title="开关">
+      <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
+    </t-cell>
+    <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
+      <t-cell title="父子组件联动" />
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/btns.vue b/src/swipe-cell/demos/btns.vue
index 6caba2e5a..a09412c3e 100644
--- a/src/swipe-cell/demos/btns.vue
+++ b/src/swipe-cell/demos/btns.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="左右两侧都有菜单">
     <t-swipe-cell>
       <t-cell title="左右都有菜单"></t-cell>
       <template #left>
@@ -12,7 +12,7 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/content.vue b/src/swipe-cell/demos/content.vue
index 3bd666eaa..33a5027ad 100644
--- a/src/swipe-cell/demos/content.vue
+++ b/src/swipe-cell/demos/content.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="通过直接传入内容或者使用 slot#content 来渲染">
     <t-swipe-cell>
       <template #content>
         <div style="padding: 10px">使用slot#content</div>
@@ -11,7 +11,7 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/swipe-cell/demos/disabled.vue b/src/swipe-cell/demos/disabled.vue
index fef0d3e59..277a51fcc 100644
--- a/src/swipe-cell/demos/disabled.vue
+++ b/src/swipe-cell/demos/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="是否启用滑动功能">
     <t-cell title="开关">
       <t-switch v-model="initData.disabled" @change="(value) => handleChange(value)"> </t-switch>
     </t-cell>
@@ -10,7 +10,7 @@
         <t-button theme="danger" style="height: 100%" size="small">删除</t-button>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/event.vue b/src/swipe-cell/demos/event.vue
index dff32c896..99d34ade3 100644
--- a/src/swipe-cell/demos/event.vue
+++ b/src/swipe-cell/demos/event.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="点击事件">
     <t-swipe-cell :right="initData.btns" @click="handleClick">
       <t-cell title="左右都有内容" note="辅助信息"></t-cell>
       <template #left>
         <t-button @click="handleClickLeft">选择</t-button>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/left-card.vue b/src/swipe-cell/demos/left-card.vue
index 3abe9ffe9..f4d6d5b16 100644
--- a/src/swipe-cell/demos/left-card.vue
+++ b/src/swipe-cell/demos/left-card.vue
@@ -1,36 +1,34 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="左滑大列表">
-      <t-swipe-cell>
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+  <tdesign-demo-block summary="左滑大列表">
+    <t-swipe-cell>
+      <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
+        <template #leftIcon>
+          <img
+            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
+            style="width: 50px; height: 50px; margin-right: 8px; float: left"
+          />
         </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
+  <tdesign-demo-block style="margin-top: 10px">
+    <t-swipe-cell expanded="right">
+      <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
+        <template #leftIcon>
+          <img
+            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
+            style="width: 50px; height: 50px; margin-right: 8px; float: left"
+          />
         </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+      </t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/left-one-menu.vue b/src/swipe-cell/demos/left-one-menu.vue
index 9b12959f7..719682652 100644
--- a/src/swipe-cell/demos/left-one-menu.vue
+++ b/src/swipe-cell/demos/left-one-menu.vue
@@ -1,22 +1,20 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="左滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+  <tdesign-demo-block summary="左滑单操作">
+    <t-swipe-cell>
+      <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
+  <tdesign-demo-block style="margin-top: 10px">
+    <t-swipe-cell expanded="right">
+      <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
 <script setup lang="ts">
diff --git a/src/swipe-cell/demos/mobile.vue b/src/swipe-cell/demos/mobile.vue
index fa7f92c22..21aac4707 100644
--- a/src/swipe-cell/demos/mobile.vue
+++ b/src/swipe-cell/demos/mobile.vue
@@ -2,200 +2,28 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">SwipeCell 滑动单元格</h1>
     <p class="summary">用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。</p>
-    <tdesign-demo-block summary="左滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑双操作">
-      <t-swipe-cell :right="initData.btns" @click="(value) => handleClickBtns(value)">
-        <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell :right="initData.btns" expanded="right" @click="(value) => handleClickBtns(value)">
-        <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑多操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-        <template #right>
-          <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-          <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-        <template #right>
-          <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-          <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑大列表">
-      <t-swipe-cell>
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="右滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-右滑单操作" note="辅助信息"></t-cell>
-        <template #left>
-          <t-button theme="primary" shape="square" @click="handleClick">选择</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="left">
-        <t-cell title="列表-右滑单操作" note="辅助信息"></t-cell>
-        <template #left>
-          <t-button theme="primary" shape="square" @click="handleClick">选择</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="通过expanded实现父子组件联动">
-      <t-cell title="开关">
-        <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
-      </t-cell>
-      <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
-        <t-cell title="父子组件联动" />
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="通过直接传入内容或者使用 slot#content 来渲染">
-      <t-swipe-cell>
-        <template #content>
-          <div style="padding: 10px">使用slot#content</div>
-        </template>
-        <div style="padding: 10px">直接写组件</div>
-        <template #right>
-          <div>
-            <t-button type="primary" style="height: 100%">收藏</t-button>
-          </div>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="是否启用滑动功能">
-      <t-cell title="开关">
-        <t-switch v-model="initData.disabled" @change="(value) => handleDisabledChange(value)"> </t-switch>
-      </t-cell>
-      <t-swipe-cell :disabled="initData.disabled">
-        <t-cell :title="initData.disabled ? '禁止滑动' : '可以滑动'"></t-cell>
-        <template #right>
-          <t-button theme="primary" style="height: 100%" size="small">收藏</t-button>
-          <t-button theme="danger" style="height: 100%" size="small">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左右两侧都有菜单">
-      <t-swipe-cell>
-        <t-cell title="左右都有菜单"></t-cell>
-        <template #left>
-          <t-button theme="theme">选择</t-button>
-        </template>
-        <template #right>
-          <div>
-            <t-button theme="theme">收藏</t-button>
-            <t-button theme="danger">删除</t-button>
-          </div>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="点击事件">
-      <t-swipe-cell :right="initData.btns" @click="handleClickBtns">
-        <t-cell title="左右都有内容" note="辅助信息"></t-cell>
-        <template #left>
-          <t-button @click="handleClick">选择</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
+    <left-one-menu />
+    <left-two-menu />
+    <left-more-menu />
+    <left-card />
+    <right-menu />
+    <bind />
+    <content />
+    <disabled />
+    <btns />
+    <event />
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import Toast from '../../toast/index';
-import { SwipeActionItem } from '../type';
-
-interface InitData {
-  disabled: boolean;
-  btns: {}[];
-  expanded: 'left' | 'right' | undefined;
-}
-const handleEdit = () => {
-  Toast.success(`编辑成功`);
-};
-
-const handleDelete = () => {
-  Toast.success(`删除成功`);
-};
-
-const initData: InitData = reactive({
-  disabled: false,
-  btns: [
-    { text: '编辑', className: 't-button--primary', onClick: handleEdit },
-    { text: '删除', className: 't-button--danger', onClick: handleDelete },
-  ],
-  expanded: 'right',
-});
-const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
-  Toast(JSON.stringify(value));
-};
-const handleClick = () => {
-  Toast('click');
-};
-const handleChange = (value: InitData['expanded']) => {
-  initData.expanded = value;
-};
-
-const handleDisabledChange = (value: InitData['disabled']) => {
-  initData.disabled = value;
-};
-
-const handleChangeSwitch = (value: boolean) => {
-  initData.expanded = value ? 'right' : undefined;
-};
+import bind from './bind.vue';
+import btns from './btns.vue';
+import content from './content.vue';
+import disabled from './disabled.vue';
+import event from './event.vue';
+import leftCard from './left-card.vue';
+import leftMoreMenu from './left-more-menu.vue';
+import leftOneMenu from './left-one-menu.vue';
+import leftTwoMenu from './left-two-menu.vue';
+import rightMenu from './right-menu.vue';
 </script>