From 0ef23a3477970762250e3fab5002235ba146dfad Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 14:36:14 +0800
Subject: [PATCH] docs(DropdownMenu): use composition api

---
 src/dropdown-menu/README.md       |  74 +++++++++++-------
 src/dropdown-menu/README.zh-CN.md |  68 ++++++++++-------
 src/dropdown-menu/demo/index.vue  | 121 ++++++++++++++++--------------
 3 files changed, 150 insertions(+), 113 deletions(-)

diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 70537d495..e73b092dc 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -17,27 +17,35 @@ app.use(DropdownItem);
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="value1" :options="option1" />
-  <van-dropdown-item v-model="value2" :options="option2" />
+  <van-dropdown-item v-model="state.value1" :options="option1" />
+  <van-dropdown-item v-model="state.value2" :options="option2" />
 </van-dropdown-menu>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: 0,
       value2: 'a',
-      option1: [
-        { text: 'Option1', value: 0 },
-        { text: 'Option2', value: 1 },
-        { text: 'Option3', value: 2 },
-      ],
-      option2: [
-        { text: 'Option A', value: 'a' },
-        { text: 'Option B', value: 'b' },
-        { text: 'Option C', value: 'c' },
-      ],
+    });
+    const option1 = [
+      { text: 'Option1', value: 0 },
+      { text: 'Option2', value: 1 },
+      { text: 'Option3', value: 2 },
+    ];
+    const option2 = [
+      { text: 'Option A', value: 'a' },
+      { text: 'Option B', value: 'b' },
+      { text: 'Option C', value: 'c' },
+    ];
+
+    return {
+      state,
+      option1,
+      option2,
     };
   },
 };
@@ -47,16 +55,16 @@ export default {
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="value" :options="option" />
+  <van-dropdown-item v-model="state.value" :options="option" />
   <van-dropdown-item title="Title" ref="item">
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
+        <van-switch v-model="state.switch1" size="24" active-color="#ee0a24" />
       </template>
     </van-cell>
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
+        <van-switch v-model="state.switch2" size="24" active-color="#ee0a24" />
       </template>
     </van-cell>
     <div style="padding: 5px 16px;">
@@ -69,23 +77,31 @@ export default {
 ```
 
 ```js
+import { ref, reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const item = ref(null);
+    const state = reactive({
       value: 0,
       switch1: false,
       switch2: false,
-      option: [
-        { text: 'Option1', value: 0 },
-        { text: 'Option2', value: 1 },
-        { text: 'Option3', value: 2 },
-      ],
+    });
+    const options = [
+      { text: 'Option1', value: 0 },
+      { text: 'Option2', value: 1 },
+      { text: 'Option3', value: 2 },
+    ];
+    const onConfirm = () => {
+      item.value.toggle();
+    };
+
+    return {
+      item,
+      state,
+      option,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm() {
-      this.$refs.item.toggle();
-    },
   },
 };
 ```
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index baac42864..64189e5c2 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -21,27 +21,35 @@ app.use(DropdownItem);
 
 ```html
 <van-dropdown-menu>
-  <van-dropdown-item v-model="value1" :options="option1" />
-  <van-dropdown-item v-model="value2" :options="option2" />
+  <van-dropdown-item v-model="state.value1" :options="option1" />
+  <van-dropdown-item v-model="state.value2" :options="option2" />
 </van-dropdown-menu>
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       value1: 0,
       value2: 'a',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 },
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' },
-      ],
+    });
+    const option1 = [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 },
+    ];
+    const option2 = [
+      { text: '默认排序', value: 'a' },
+      { text: '好评排序', value: 'b' },
+      { text: '销量排序', value: 'c' },
+    ];
+
+    return {
+      state,
+      option1,
+      option2,
     };
   },
 };
@@ -75,23 +83,31 @@ export default {
 ```
 
 ```js
+import { ref, reactive } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const item = ref(null);
+    const state = reactive({
       value: 0,
       switch1: false,
       switch2: false,
-      option: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 },
-      ],
+    });
+    const options = [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 },
+    ];
+    const onConfirm = () => {
+      item.value.toggle();
+    };
+
+    return {
+      item,
+      state,
+      option,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm() {
-      this.$refs.item.toggle();
-    },
   },
 };
 ```
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 6affb42f8..dcb0fcc8a 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -58,74 +58,79 @@
 </template>
 
 <script>
+import { computed, reactive, ref, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { RED } from '../../utils/constant';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      disableMenu: '禁用菜单',
-      switchTitle1: '包邮',
-      switchTitle2: '团购',
-      itemTitle: '筛选',
-      expandDirection: '向上展开',
-      customContent: '自定义菜单内容',
-      customActiveColor: '自定义选中态颜色',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 },
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' },
-      ],
-    },
-    'en-US': {
-      disableMenu: 'Disable Menu',
-      switchTitle1: 'Title',
-      switchTitle2: 'Title',
-      itemTitle: 'Title',
-      expandDirection: 'Expand Direction',
-      customContent: 'Custom Content',
-      customActiveColor: 'Custom Active Color',
-      option1: [
-        { text: 'Option1', value: 0 },
-        { text: 'Option2', value: 1 },
-        { text: 'Option3', value: 2 },
-      ],
-      option2: [
-        { text: 'Option A', value: 'a' },
-        { text: 'Option B', value: 'b' },
-        { text: 'Option C', value: 'c' },
-      ],
-    },
+const i18n = {
+  'zh-CN': {
+    disableMenu: '禁用菜单',
+    switchTitle1: '包邮',
+    switchTitle2: '团购',
+    itemTitle: '筛选',
+    expandDirection: '向上展开',
+    customContent: '自定义菜单内容',
+    customActiveColor: '自定义选中态颜色',
+    option1: [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 },
+    ],
+    option2: [
+      { text: '默认排序', value: 'a' },
+      { text: '好评排序', value: 'b' },
+      { text: '销量排序', value: 'c' },
+    ],
   },
+  'en-US': {
+    disableMenu: 'Disable Menu',
+    switchTitle1: 'Title',
+    switchTitle2: 'Title',
+    itemTitle: 'Title',
+    expandDirection: 'Expand Direction',
+    customContent: 'Custom Content',
+    customActiveColor: 'Custom Active Color',
+    option1: [
+      { text: 'Option1', value: 0 },
+      { text: 'Option2', value: 1 },
+      { text: 'Option3', value: 2 },
+    ],
+    option2: [
+      { text: 'Option A', value: 'a' },
+      { text: 'Option B', value: 'b' },
+      { text: 'Option C', value: 'c' },
+    ],
+  },
+};
 
-  data() {
-    return {
-      RED,
+export default {
+  setup() {
+    const item = ref(null);
+    const t = useTranslate(i18n);
+
+    const state = reactive({
       switch1: true,
       switch2: false,
       value1: 0,
       value2: 'a',
+    });
+
+    const option1 = computed(() => t('option1'));
+    const option2 = computed(() => t('option2'));
+
+    const onConfirm = () => {
+      item.value?.toggle();
     };
-  },
 
-  computed: {
-    option1() {
-      return this.t('option1');
-    },
-
-    option2() {
-      return this.t('option2');
-    },
-  },
-
-  methods: {
-    onConfirm() {
-      this.$refs.item.toggle();
-    },
+    return {
+      ...toRefs(state),
+      t,
+      RED,
+      item,
+      option1,
+      option2,
+      onConfirm,
+    };
   },
 };
 </script>