From 75f8e36923531046d47c34f7352f2375087e26c1 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 13:05:52 +0800
Subject: [PATCH] docs(SwipeCell): use composition api

---
 src/swipe-cell/README.md       | 18 ++++----
 src/swipe-cell/README.zh-CN.md | 18 ++++----
 src/swipe-cell/demo/index.vue  | 78 +++++++++++++++++-----------------
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index a9db6dc79..744b58a75 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -71,9 +71,11 @@ app.use(SwipeCell);
 ```
 
 ```js
+import { Dialog } from 'vant';
+
 export default {
-  methods: {
-    beforeClose({ position, instance }) {
+  setup() {
+    const beforeClose = ({ position }) => {
       switch (position) {
         case 'left':
         case 'cell':
@@ -81,14 +83,14 @@ export default {
           return true;
         case 'right':
           return new Promise((resolve) => {
-            this.$dialog
-              .confirm({
-                message: 'Are you sure to delete?',
-              })
-              .then(resolve);
+            Dialog.confirm({
+              title: 'Are you sure to delete?',
+            }).then(resolve);
           });
       }
-    },
+    };
+
+    return { beforeClose };
   },
 };
 ```
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index f21fc6c99..f2548f53a 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -81,10 +81,12 @@ app.use(SwipeCell);
 ```
 
 ```js
+import { Dialog } from 'vant';
+
 export default {
-  methods: {
+  setup() {
     // position 为关闭时点击的位置
-    beforeClose({ position }) {
+    const beforeClose = ({ position }) => {
       switch (position) {
         case 'left':
         case 'cell':
@@ -92,14 +94,14 @@ export default {
           return true;
         case 'right':
           return new Promise((resolve) => {
-            this.$dialog
-              .confirm({
-                message: '确定删除吗？',
-              })
-              .then(resolve);
+            Dialog.confirm({
+              title: '确定删除吗？',
+            }).then(resolve);
           });
       }
-    },
+    };
+
+    return { beforeClose };
   },
 };
 ```
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index a1c4b50b4..be8dd21de 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -45,39 +45,37 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import Dialog from '../../dialog';
+
+const i18n = {
+  'zh-CN': {
+    select: '选择',
+    delete: '删除',
+    collect: '收藏',
+    title: '单元格',
+    confirm: '确定删除吗？',
+    cardTitle: '商品标题',
+    beforeClose: '异步关闭',
+    customContent: '自定义内容',
+  },
+  'en-US': {
+    select: 'Select',
+    delete: 'Delete',
+    collect: 'Collect',
+    title: 'Cell',
+    confirm: 'Are you sure to delete?',
+    cardTitle: 'Title',
+    beforeClose: 'Before Close',
+    customContent: 'Custom Content',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      select: '选择',
-      delete: '删除',
-      collect: '收藏',
-      title: '单元格',
-      confirm: '确定删除吗？',
-      cardTitle: '商品标题',
-      beforeClose: '异步关闭',
-      customContent: '自定义内容',
-    },
-    'en-US': {
-      select: 'Select',
-      delete: 'Delete',
-      collect: 'Collect',
-      title: 'Cell',
-      confirm: 'Are you sure to delete?',
-      cardTitle: 'Title',
-      beforeClose: 'Before Close',
-      customContent: 'Custom Content',
-    },
-  },
-
-  data() {
-    return {
-      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
-    };
-  },
-
-  methods: {
-    beforeClose({ position }) {
+  setup() {
+    const t = useTranslate(i18n);
+    const beforeClose = ({ position }: { position: string }) => {
       switch (position) {
         case 'left':
         case 'cell':
@@ -85,14 +83,18 @@ export default {
           return true;
         case 'right':
           return new Promise((resolve) => {
-            this.$dialog
-              .confirm({
-                message: this.t('confirm'),
-              })
-              .then(resolve);
+            Dialog.confirm({
+              title: t('confirm'),
+            }).then(resolve);
           });
       }
-    },
+    };
+
+    return {
+      t,
+      imageURL: 'https://img.yzcdn.cn/vant/ipad.jpeg',
+      beforeClose,
+    };
   },
 };
 </script>