uniapp popup
时间: 2023-08-29 10:10:52 浏览: 109
uni-app自定义uni-popup弹窗内容
Uniapp 中可以使用 `<popup>` 标签来实现弹出框的效果。具体使用方法如下:
1. 在需要弹出框的页面中引入 `<popup>` 组件:
```html
<template>
<view>
<!-- 这里是页面内容 -->
<popup></popup>
</view>
</template>
```
2. 在 `<popup>` 组件中添加需要弹出的内容:
```html
<template>
<view>
<view @click="showPopup">点击弹出框</view>
<popup>
<view>这里是弹出框的内容</view>
</popup>
</view>
</template>
```
3. 在 `<script>` 标签中添加 `showPopup` 函数来控制弹出框的显示和隐藏:
```javascript
export default {
methods: {
showPopup() {
this.$refs.popup.show()
}
}
}
```
此时点击页面中的 "点击弹出框" 文字,即可弹出框中的内容。同样的,可以在 `showPopup()` 函数中调用 `this.$refs.popup.hide()` 方法来隐藏弹出框。
阅读全文