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
-
+
-
+
-
+
```
```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
@@ -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,
+ };
},
};
```