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

---
 src/popover/README.md       |  96 ++++++++++++---------
 src/popover/README.zh-CN.md |  91 +++++++++++++-------
 src/popover/demo/index.vue  | 163 +++++++++++++++++++-----------------
 3 files changed, 203 insertions(+), 147 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index 759197f08..5122f5cf4 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -23,23 +23,27 @@ app.use(Popover);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      showPopover: false,
-      actions: [
-        { text: 'Option 1' },
-        { text: 'Option 2' },
-        { text: 'Option 3' },
-      ],
-    };
-  },
-  methods: {
-    onSelect(action) {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: 'Option 1' },
+      { text: 'Option 2' },
+      { text: 'Option 3' },
+    ];
+
+    const onSelect = (action) => {
       Toast(action.text);
-    },
+    };
+
+    return {
+      actions,
+      onSelect,
+      showPopover,
+    };
   },
 };
 ```
@@ -57,15 +61,20 @@ Using the `theme` prop to change the style of Popover.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: 'Option 1' },
+      { text: 'Option 2' },
+      { text: 'Option 3' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [
-        { text: 'Option 1' },
-        { text: 'Option 2' },
-        { text: 'Option 3' },
-      ],
+      actions,
+      showPopover,
     };
   },
 };
@@ -105,15 +114,20 @@ bottom-end    # Bottom right
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: 'Option 1', icon: 'add-o' },
+      { text: 'Option 2', icon: 'music-o' },
+      { text: 'Option 3', icon: 'more-o' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [
-        { text: 'Option 1', icon: 'add-o' },
-        { text: 'Option 2', icon: 'music-o' },
-        { text: 'Option 3', icon: 'more-o' },
-      ],
+      actions,
+      showPopover,
     };
   },
 };
@@ -132,15 +146,20 @@ Using the `disabled` option to disable an action.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: 'Option 1', disabled: true },
+      { text: 'Option 2', disabled: true },
+      { text: 'Option 3' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [
-        { text: 'Option 1', disabled: true },
-        { text: 'Option 2', disabled: true },
-        { text: 'Option 3' },
-      ],
+      actions,
+      showPopover,
     };
   },
 };
@@ -172,11 +191,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      showPopover: false,
-    };
+  setup() {
+    const showPopover = ref(false);
+    return { showPopover };
   },
 };
 ```
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 3e4790c1d..6375d3edf 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -29,20 +29,29 @@ app.use(Popover);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      showPopover: false,
-      // 通过 actions 属性来定义菜单选项
-      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
-    };
-  },
-  methods: {
-    onSelect(action) {
+  setup() {
+    const showPopover = ref(false);
+
+    // 通过 actions 属性来定义菜单选项
+    const actions = [
+      { text: '选项一' },
+      { text: '选项二' },
+      { text: '选项三' },
+    ];
+
+    const onSelect = (action) => {
       Toast(action.text);
-    },
+    };
+
+    return {
+      actions,
+      onSelect,
+      showPopover,
+    };
   },
 };
 ```
@@ -60,11 +69,20 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: '选项一' },
+      { text: '选项二' },
+      { text: '选项三' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+      actions,
+      showPopover,
     };
   },
 };
@@ -108,15 +126,20 @@ bottom-end    # 底部右侧位置
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: '选项一', icon: 'add-o' },
+      { text: '选项二', icon: 'music-o' },
+      { text: '选项三', icon: 'more-o' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [
-        { text: '选项一', icon: 'add-o' },
-        { text: '选项二', icon: 'music-o' },
-        { text: '选项三', icon: 'more-o' },
-      ],
+      actions,
+      showPopover,
     };
   },
 };
@@ -135,15 +158,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: '选项一', disabled: true },
+      { text: '选项二', disabled: true },
+      { text: '选项三' },
+    ];
+
     return {
-      showPopover: false,
-      actions: [
-        { text: '选项一', disabled: true },
-        { text: '选项二', disabled: true },
-        { text: '选项三' },
-      ],
+      actions,
+      showPopover,
     };
   },
 };
@@ -177,11 +205,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      showPopover: false,
-    };
+  setup() {
+    const showPopover = ref(false);
+    return { showPopover };
   },
 };
 ```
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index c907d393d..dfdd5e335 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -120,65 +120,79 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
-      shortActions: [{ text: '选项一' }, { text: '选项二' }],
-      actionsWithIcon: [
-        { text: '选项一', icon: 'add-o' },
-        { text: '选项二', icon: 'music-o' },
-        { text: '选项三', icon: 'more-o' },
-      ],
-      actionsDisabled: [
-        { text: '选项一', disabled: true },
-        { text: '选项二', disabled: true },
-        { text: '选项三' },
-      ],
-      showIcon: '展示图标',
-      placement: '弹出位置',
-      darkTheme: '深色风格',
-      lightTheme: '浅色风格',
-      showPopover: '点击弹出气泡',
-      actionOptions: '选项配置',
-      customContent: '自定义内容',
-      disableAction: '禁用选项',
-      choosePlacement: '选择弹出位置',
-    },
-    'en-US': {
-      actions: [
-        { text: 'Option 1' },
-        { text: 'Option 2' },
-        { text: 'Option 3' },
-      ],
-      shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
-      actionsWithIcon: [
-        { text: 'Option 1', icon: 'add-o' },
-        { text: 'Option 2', icon: 'music-o' },
-        { text: 'Option 3', icon: 'more-o' },
-      ],
-      actionsDisabled: [
-        { text: 'Option 1', disabled: true },
-        { text: 'Option 2', disabled: true },
-        { text: 'Option 3' },
-      ],
-      showIcon: 'Show Icon',
-      placement: 'Placement',
-      darkTheme: 'Dark Theme',
-      lightTheme: 'Light Theme',
-      showPopover: 'Show Popover',
-      actionOptions: 'Action Options',
-      customContent: 'Custom Content',
-      disableAction: 'Disable Action',
-      choosePlacement: 'Placement',
-    },
+const i18n = {
+  'zh-CN': {
+    actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    shortActions: [{ text: '选项一' }, { text: '选项二' }],
+    actionsWithIcon: [
+      { text: '选项一', icon: 'add-o' },
+      { text: '选项二', icon: 'music-o' },
+      { text: '选项三', icon: 'more-o' },
+    ],
+    actionsDisabled: [
+      { text: '选项一', disabled: true },
+      { text: '选项二', disabled: true },
+      { text: '选项三' },
+    ],
+    showIcon: '展示图标',
+    placement: '弹出位置',
+    darkTheme: '深色风格',
+    lightTheme: '浅色风格',
+    showPopover: '点击弹出气泡',
+    actionOptions: '选项配置',
+    customContent: '自定义内容',
+    disableAction: '禁用选项',
+    choosePlacement: '选择弹出位置',
   },
+  'en-US': {
+    actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
+    shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
+    actionsWithIcon: [
+      { text: 'Option 1', icon: 'add-o' },
+      { text: 'Option 2', icon: 'music-o' },
+      { text: 'Option 3', icon: 'more-o' },
+    ],
+    actionsDisabled: [
+      { text: 'Option 1', disabled: true },
+      { text: 'Option 2', disabled: true },
+      { text: 'Option 3' },
+    ],
+    showIcon: 'Show Icon',
+    placement: 'Placement',
+    darkTheme: 'Dark Theme',
+    lightTheme: 'Light Theme',
+    showPopover: 'Show Popover',
+    actionOptions: 'Action Options',
+    customContent: 'Custom Content',
+    disableAction: 'Disable Action',
+    choosePlacement: 'Placement',
+  },
+};
 
-  data() {
-    return {
+const placements = [
+  'top',
+  'top-start',
+  'top-end',
+  'left',
+  'left-start',
+  'left-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+];
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       show: {
         showIcon: false,
         placement: false,
@@ -189,33 +203,26 @@ export default {
       },
       showPicker: false,
       currentPlacement: 'top',
-      placements: [
-        'top',
-        'top-start',
-        'top-end',
-        'left',
-        'left-start',
-        'left-end',
-        'right',
-        'right-start',
-        'right-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-      ],
-    };
-  },
+    });
 
-  methods: {
-    onPickerChange(value) {
+    const onPickerChange = (value: string) => {
       setTimeout(() => {
-        this.show.placement = true;
-        this.currentPlacement = value;
+        state.show.placement = true;
+        state.currentPlacement = value;
       });
-    },
-    onSelect(action) {
+    };
+
+    const onSelect = (action: { text: string }) => {
       Toast(action.text);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onSelect,
+      placements,
+      onPickerChange,
+    };
   },
 };
 </script>