uniapp写一个弹窗
时间: 2023-05-23 15:03:28 浏览: 64
非常感谢您的提问!以下是一个简单的uni-app弹窗代码示例:
<template>
<div>
<button @click="showDialog">点击显示弹窗</button>
<div v-show="dialogVisible" class="dialog">
<div class="dialog-content">
<h2>这是一个弹窗</h2>
<p>欢迎使用uni-app</p>
<button @click="closeDialog">关闭</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
showDialog() {
this.dialogVisible = true;
},
closeDialog() {
this.dialogVisible = false;
}
}
}
</script>
<style>
.dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.dialog-content {
background-color: white;
padding: 20px;
border-radius: 10px;
}
</style>
希望这可以帮助您完成uni-app的弹窗功能!如果您有其他问题,请随时向我提问。