From 2494c0aa0e22d370d234a4940775cdf888676dcb Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 6 Dec 2020 16:03:38 +0800
Subject: [PATCH] docs(Popup): use composition api

---
 src/popup/README.md       | 34 +++++++++++++++++++---------------
 src/popup/README.zh-CN.md | 30 +++++++++++++++++-------------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/popup/README.md b/src/popup/README.md
index c6fed9c75..2096dee0a 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -20,17 +20,18 @@ app.use(Popup);
 ```
 
 ```js
-export default {
-  data() {
-    return {
-      show: false,
-    };
-  },
+import { ref } from 'vue';
 
-  methods: {
-    showPopup() {
-      this.show = true;
-    },
+export default {
+  setup() {
+    const show = ref(false);
+    const showPopup = () => {
+      show.value = true;
+    };
+    return {
+      show,
+      showPopup,
+    };
   },
 };
 ```
@@ -86,20 +87,23 @@ Use `position` prop to set popup display position.
 Use `teleport` prop to specify mount location.
 
 ```html
-<!-- mount to body -->
+<!-- teleport to body -->
 <van-popup v-model:show="show" teleport="body" />
 
-<!-- mount to #app -->
+<!-- teleport to #app -->
 <van-popup v-model:show="show" teleport="#app" />
 
-<!-- mount to Element -->
+<!-- teleport to Element -->
 <van-popup v-model:show="show" :teleport="myContainer" />
 ```
 
 ```js
 export default {
-  beforeCreate() {
-    this.myContainer = document.querySelector('.my-container');
+  setup() {
+    const myContainer = document.querySelector('.my-container');
+    return {
+      myContainer,
+    };
   },
 };
 ```
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index ac89c2ca5..52666b9a4 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -26,17 +26,18 @@ app.use(Popup);
 ```
 
 ```js
-export default {
-  data() {
-    return {
-      show: false,
-    };
-  },
+import { ref } from 'vue';
 
-  methods: {
-    showPopup() {
-      this.show = true;
-    },
+export default {
+  setup() {
+    const show = ref(false);
+    const showPopup = () => {
+      show.value = true;
+    };
+    return {
+      show,
+      showPopup,
+    };
   },
 };
 ```
@@ -93,7 +94,7 @@ export default {
 
 ### 指定挂载位置
 
-弹出层默认挂载到组件所在位置，可以通过 `teleport` 属性指定挂载位置。
+弹出层默认挂载到组件标签所在位置，可以通过 `teleport` 属性指定挂载位置。
 
 ```html
 <!-- 挂载到 body 节点下 -->
@@ -108,8 +109,11 @@ export default {
 
 ```js
 export default {
-  beforeCreate() {
-    this.myContainer = document.querySelector('.my-container');
+  setup() {
+    const myContainer = document.querySelector('.my-container');
+    return {
+      myContainer,
+    };
   },
 };
 ```