uniapp学一个弹窗
时间: 2023-05-23 18:03:27 浏览: 61
Uniapp 学习一个弹窗可以参考以下代码:
<template>
<div>
<button @click="showDialog">打开弹窗</button>
<dialog :show="isDialogShow" @close="handleClose">
<p>这是弹窗内容</p>
</dialog>
</div>
</template>
<script>
export default {
data() {
return {
isDialogShow: false
}
},
methods: {
showDialog() {
this.isDialogShow = true
},
handleClose() {
this.isDialogShow = false
}
}
}
</script>
<style>
dialog {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
</style>
这段代码使用了 Uniapp 提供的 dialog 组件,通过设置 show 属性控制弹窗的显示和隐藏。跟随按钮的点击事件,通过修改 data 中的状态值 isDialogShow 展示弹窗。关闭弹窗是通过监听 dialog 的 close 事件来实现的,调用 handleClose 方法将 isDialogShow 设置为 false,弹窗随之消失。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)