Merge pull request #473 from wwlh200/fix/doc-swipeCell413

docs(swipe-cell): update docs and demo

src/swipe-cell/demos/bind.vue

@@ -1,46 +1,34 @@
 <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 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>

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,31 +12,22 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </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>

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,15 +11,7 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    return {};
-  },
-});
-</script>
+<script setup lang="ts"></script>

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,24 +10,16 @@
         <t-button theme="danger" style="height: 100%" size="small">删除</t-button>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </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>

src/swipe-cell/demos/event.vue

@@ -1,44 +1,35 @@
 <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 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>

src/swipe-cell/demos/left-card.vue

@@ -1,50 +1,40 @@
 <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 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>

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>