docs(ActionSheet): use composition api

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() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+    const actions = [
-      actions: [
+      { name: 'Option 1' },
-        { name: 'Option 1' },
+      { name: 'Option 2' },
-        { name: 'Option 2' },
+      { name: 'Option 3' },
-        { name: 'Option 3' },
+    ];
-      ],
+    const onSelect = (item) => {
-    };
+      show.value = false;
-  },
-  methods: {
-    onSelect(item) {
-      this.show = 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() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+    const actions = [
-      actions: [
+      { name: 'Option 1' },
-        { name: 'Option 1' },
+      { name: 'Option 2' },
-        { name: 'Option 2' },
+      { name: 'Option 3' },
-        { name: 'Option 3' },
+    ];
-      ],
+    const onCancel = () => {
-    };
-  },
-  methods: {
-    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,
+      show,
-      actions: [
+      actions,
-        { name: 'Option 1' },
-        { name: 'Option 2' },
-        { name: 'Option 3', subname: 'Description' },
-      ],
     };
   },
 };
@@ -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,
+      show,
-      actions: [
+      actions,
-        { name: 'Colored Option', color: '#ee0a24' },
-        { name: 'Disabled Option', disabled: true },
-        { name: 'Loading Option', loading: true },
-      ],
     };
   },
 };

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() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+    const actions = [
-      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
+      { name: '选项一' },
-    };
+      { name: '选项二' },
-  },
+      { name: '选项三' },
-  methods: {
+    ];
-    onSelect(item) {
+    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() {
+  setup() {
-    return {
+    const show = ref(false);
-      show: false,
+    const actions = [
-      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
+      { name: '选项一' },
-    };
+      { name: '选项二' },
-  },
+      { name: '选项三' },
-  methods: {
+    ];
-    onCancel() {
+    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,
+      show,
-      actions: [
+      actions,
-        { name: '选项一' },
-        { name: '选项二' },
-        { name: '选项三', subname: '描述信息' },
-      ],
     };
   },
 };
@@ -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,
+      show,
-      actions: [
+      actions,
-        { name: '着色选项', color: '#ee0a24' },
-        { name: '禁用选项', disabled: true },
-        { name: '加载选项', loading: true },
-      ],
     };
   },
 };

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() {
+  setup() {
-    return {
+    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: {
+    const onCancel = () => {
-    simpleActions() {
+      Toast(t('cancel'));
-      return [
+    };
-        { name: this.t('option1') },
-        { name: this.t('option2') },
-        { name: this.t('option3') },
-      ];
-    },
 
-    actionsWithDescription() {
+    return {
-      return [
+      ...toRefs(state),
-        { name: this.t('option1') },
+      onSelect,
-        { name: this.t('option2') },
+      onCancel,
-        { name: this.t('option3'), subname: this.t('subname') },
+      simpleActions,
-      ];
+      statusActions,
-    },
+      actionsWithDescription,
-
+    };
-    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'));
-    },
   },
 };
 </script>