From 8a7882b0c82ea4ad2d86ddd8d702eaa36c6944e3 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 9 Dec 2020 17:48:37 +0800
Subject: [PATCH] docs(ActionSheet): use composition api

---
 src/action-sheet/README.md       | 98 +++++++++++++++++++-------------
 src/action-sheet/README.zh-CN.md | 90 ++++++++++++++++++-----------
 src/action-sheet/demo/index.vue  | 78 ++++++++++++-------------
 3 files changed, 154 insertions(+), 112 deletions(-)

diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index e96e4d4bd..23c2868fc 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -22,24 +22,27 @@ Use `actions` prop to set options of action-sheet.
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      show: false,
-      actions: [
-        { name: 'Option 1' },
-        { name: 'Option 2' },
-        { name: 'Option 3' },
-      ],
-    };
-  },
-  methods: {
-    onSelect(item) {
-      this.show = false;
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: 'Option 1' },
+      { name: 'Option 2' },
+      { name: 'Option 3' },
+    ];
+    const onSelect = (item) => {
+      show.value = false;
       Toast(item.name);
-    },
+    };
+
+    return {
+      show,
+      actions,
+      onSelect,
+    };
   },
 };
 ```
@@ -57,23 +60,26 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      show: false,
-      actions: [
-        { name: 'Option 1' },
-        { name: 'Option 2' },
-        { name: 'Option 3' },
-      ],
-    };
-  },
-  methods: {
-    onCancel() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: 'Option 1' },
+      { name: 'Option 2' },
+      { name: 'Option 3' },
+    ];
+    const onCancel = () => {
       Toast('cancel');
-    },
+    };
+
+    return {
+      show,
+      actions,
+      onCancel,
+    };
   },
 };
 ```
@@ -91,15 +97,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: 'Option 1' },
+      { name: 'Option 2' },
+      { name: 'Option 3', subname: 'Description' },
+    ];
+
     return {
-      show: false,
-      actions: [
-        { name: 'Option 1' },
-        { name: 'Option 2' },
-        { name: 'Option 3', subname: 'Description' },
-      ],
+      show,
+      actions,
     };
   },
 };
@@ -117,15 +128,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: 'Colored Option', color: '#ee0a24' },
+      { name: 'Disabled Option', disabled: true },
+      { name: 'Loading Option', loading: true },
+    ];
+
     return {
-      show: false,
-      actions: [
-        { name: 'Colored Option', color: '#ee0a24' },
-        { name: 'Disabled Option', disabled: true },
-        { name: 'Loading Option', loading: true },
-      ],
+      show,
+      actions,
     };
   },
 };
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 278d5e5b1..580a63d38 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -26,22 +26,29 @@ app.use(ActionSheet);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      show: false,
-      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
-    };
-  },
-  methods: {
-    onSelect(item) {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: '选项一' },
+      { name: '选项二' },
+      { name: '选项三' },
+    ];
+    const onSelect = (item) => {
       // 默认情况下点击选项时不会自动收起
       // 可以通过 close-on-click-action 属性开启自动收起
-      this.show = false;
+      show.value = false;
       Toast(item.name);
-    },
+    };
+
+    return {
+      show,
+      actions,
+      onSelect,
+    };
   },
 };
 ```
@@ -61,19 +68,26 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      show: false,
-      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
-    };
-  },
-  methods: {
-    onCancel() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: '选项一' },
+      { name: '选项二' },
+      { name: '选项三' },
+    ];
+    const onCancel = () => {
       Toast('取消');
-    },
+    };
+
+    return {
+      show,
+      actions,
+      onCancel,
+    };
   },
 };
 ```
@@ -93,15 +107,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: '选项一' },
+      { name: '选项二' },
+      { name: '选项三', subname: '描述信息' },
+    ];
+
     return {
-      show: false,
-      actions: [
-        { name: '选项一' },
-        { name: '选项二' },
-        { name: '选项三', subname: '描述信息' },
-      ],
+      show,
+      actions,
     };
   },
 };
@@ -121,15 +140,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+    const actions = [
+      { name: '着色选项', color: '#ee0a24' },
+      { name: '禁用选项', disabled: true },
+      { name: '加载选项', loading: true },
+    ];
+
     return {
-      show: false,
-      actions: [
-        { name: '着色选项', color: '#ee0a24' },
-        { name: '禁用选项', disabled: true },
-        { name: '加载选项', loading: true },
-      ],
+      show,
+      actions,
     };
   },
 };
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 98f240d46..6caf16a52 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -52,7 +52,9 @@
 </template>
 
 <script>
-import { RED } from '../../utils/constant';
+import { computed, reactive, toRefs } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
 
 export default {
   i18n: {
@@ -86,8 +88,9 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       show: {
         basic: false,
         cancel: false,
@@ -95,44 +98,43 @@ export default {
         status: false,
         description: false,
       },
+    });
+
+    const simpleActions = computed(() => [
+      { name: t('option1') },
+      { name: t('option2') },
+      { name: t('option3') },
+    ]);
+
+    const statusActions = computed(() => [
+      { name: t('coloredOption'), color: '#ee0a24' },
+      { name: t('disabledOption'), disabled: true },
+      { loading: true },
+    ]);
+
+    const actionsWithDescription = computed(() => [
+      { name: t('option1') },
+      { name: t('option2') },
+      { name: t('option3'), subname: t('subname') },
+    ]);
+
+    const onSelect = (item) => {
+      state.show.basic = false;
+      Toast(item.name);
     };
-  },
 
-  computed: {
-    simpleActions() {
-      return [
-        { name: this.t('option1') },
-        { name: this.t('option2') },
-        { name: this.t('option3') },
-      ];
-    },
+    const onCancel = () => {
+      Toast(t('cancel'));
+    };
 
-    actionsWithDescription() {
-      return [
-        { name: this.t('option1') },
-        { name: this.t('option2') },
-        { name: this.t('option3'), subname: this.t('subname') },
-      ];
-    },
-
-    statusActions() {
-      return [
-        { name: this.t('coloredOption'), color: RED },
-        { name: this.t('disabledOption'), disabled: true },
-        { loading: true },
-      ];
-    },
-  },
-
-  methods: {
-    onSelect(item) {
-      this.show.basic = false;
-      this.$toast(item.name);
-    },
-
-    onCancel() {
-      this.$toast(this.t('cancel'));
-    },
+    return {
+      ...toRefs(state),
+      onSelect,
+      onCancel,
+      simpleActions,
+      statusActions,
+      actionsWithDescription,
+    };
   },
 };
 </script>