blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 23:49:14 +08:00
Code Issues Projects Releases Wiki Activity

docs(Popup): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-06 16:03:38 +08:00
parent 497a88d7bb
commit 2494c0aa0e
2 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/popup/README.md
View File

@ -20,17 +20,18 @@ app.use(Popup);
``` ```
```js ```js
export default { import { ref } from 'vue';
data() {
return {
show: false,
};
},
methods: { export default {
showPopup() { setup() {
this.show = true; 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. Use `teleport` prop to specify mount location.
```html ```html
<!-- mount to body --> <!-- teleport to body -->
<van-popup v-model:show="show" teleport="body" /> <van-popup v-model:show="show" teleport="body" />
<!-- mount to #app --> <!-- teleport to #app -->
<van-popup v-model:show="show" teleport="#app" /> <van-popup v-model:show="show" teleport="#app" />
<!-- mount to Element --> <!-- teleport to Element -->
<van-popup v-model:show="show" :teleport="myContainer" /> <van-popup v-model:show="show" :teleport="myContainer" />
``` ```
```js ```js
export default { export default {
beforeCreate() { setup() {
this.myContainer = document.querySelector('.my-container'); const myContainer = document.querySelector('.my-container');
return {
myContainer,
};
}, },
}; };
``` ```

30
src/popup/README.zh-CN.md
View File

@ -26,17 +26,18 @@ app.use(Popup);
``` ```
```js ```js
export default { import { ref } from 'vue';
data() {
return {
show: false,
};
},
methods: { export default {
showPopup() { setup() {
this.show = true; const show = ref(false);
}, const showPopup = () => {
show.value = true;
};
return {
show,
showPopup,
};
}, },
}; };
``` ```
@ -93,7 +94,7 @@ export default {
### 指定挂载位置 ### 指定挂载位置
弹出层默认挂载到组件所在位置，可以通过 `teleport` 属性指定挂载位置。 弹出层默认挂载到组件标签所在位置，可以通过 `teleport` 属性指定挂载位置。
```html ```html
<!-- 挂载到 body 节点下 --> <!-- 挂载到 body 节点下 -->
@ -108,8 +109,11 @@ export default {
```js ```js
export default { export default {
beforeCreate() { setup() {
this.myContainer = document.querySelector('.my-container'); const myContainer = document.querySelector('.my-container');
return {
myContainer,
};
}, },
}; };
``` ```