docs(Popover): use composition api

src/popover/README.md

@@ -23,23 +23,27 @@ app.use(Popover);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: 'Option 1' },
       { text: 'Option 2' },
       { text: 'Option 3' },
-      ],
+    ];
-    };
+
-  },
+    const onSelect = (action) => {
-  methods: {
-    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() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: 'Option 1' },
       { text: 'Option 2' },
       { text: 'Option 3' },
-      ],
+    ];
+
+    return {
+      actions,
+      showPopover,
     };
   },
 };
@@ -105,15 +114,20 @@ bottom-end    # Bottom right
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: 'Option 1', icon: 'add-o' },
       { text: 'Option 2', icon: 'music-o' },
       { text: 'Option 3', icon: 'more-o' },
-      ],
+    ];
+
+    return {
+      actions,
+      showPopover,
     };
   },
 };
@@ -132,15 +146,20 @@ Using the `disabled` option to disable an action.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: 'Option 1', disabled: true },
       { text: 'Option 2', disabled: true },
       { text: 'Option 3' },
-      ],
+    ];
+
+    return {
+      actions,
+      showPopover,
     };
   },
 };
@@ -172,11 +191,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    return { showPopover };
-    };
   },
 };
 ```

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() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+
     // 通过 actions 属性来定义菜单选项
-      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+    const actions = [
-    };
+      { text: '选项一' },
-  },
+      { text: '选项二' },
-  methods: {
+      { text: '选项三' },
-    onSelect(action) {
+    ];
+
+    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,
-      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
+      showPopover,
     };
   },
 };
@@ -108,15 +126,20 @@ bottom-end    # 底部右侧位置
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: '选项一', icon: 'add-o' },
       { text: '选项二', icon: 'music-o' },
       { text: '选项三', icon: 'more-o' },
-      ],
+    ];
+
+    return {
+      actions,
+      showPopover,
     };
   },
 };
@@ -135,15 +158,20 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    const actions = [
-      actions: [
       { text: '选项一', disabled: true },
       { text: '选项二', disabled: true },
       { text: '选项三' },
-      ],
+    ];
+
+    return {
+      actions,
+      showPopover,
     };
   },
 };
@@ -177,11 +205,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const showPopover = ref(false);
-      showPopover: false,
+    return { showPopover };
-    };
   },
 };
 ```

src/popover/demo/index.vue

@@ -120,11 +120,12 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
     shortActions: [{ text: '选项一' }, { text: '选项二' }],
@@ -149,11 +150,7 @@ export default {
     choosePlacement: '选择弹出位置',
   },
   'en-US': {
-      actions: [
+    actions: [{ text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }],
-        { text: 'Option 1' },
-        { text: 'Option 2' },
-        { text: 'Option 3' },
-      ],
     shortActions: [{ text: 'Option 1' }, { text: 'Option 2' }],
     actionsWithIcon: [
       { text: 'Option 1', icon: 'add-o' },
@@ -175,21 +172,9 @@ export default {
     disableAction: 'Disable Action',
     choosePlacement: 'Placement',
   },
-  },
+};
 
-  data() {
+const placements = [
-    return {
-      show: {
-        showIcon: false,
-        placement: false,
-        darkTheme: false,
-        lightTheme: false,
-        customContent: false,
-        disableAction: false,
-      },
-      showPicker: false,
-      currentPlacement: 'top',
-      placements: [
   'top',
   'top-start',
   'top-end',
@@ -202,20 +187,42 @@ export default {
   'bottom',
   'bottom-start',
   'bottom-end',
-      ],
+];
-    };
-  },
 
-  methods: {
+export default {
-    onPickerChange(value) {
+  setup() {
-      setTimeout(() => {
+    const t = useTranslate(i18n);
-        this.show.placement = true;
+    const state = reactive({
-        this.currentPlacement = value;
+      show: {
+        showIcon: false,
+        placement: false,
+        darkTheme: false,
+        lightTheme: false,
+        customContent: false,
+        disableAction: false,
+      },
+      showPicker: false,
+      currentPlacement: 'top',
     });
-    },
+
-    onSelect(action) {
+    const onPickerChange = (value: string) => {
+      setTimeout(() => {
+        state.show.placement = true;
+        state.currentPlacement = value;
+      });
+    };
+
+    const onSelect = (action: { text: string }) => {
       Toast(action.text);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onSelect,
+      placements,
+      onPickerChange,
+    };
   },
 };
 </script>