帮我写一个uniapp的弹出层代码
时间: 2023-01-11 16:55:36 浏览: 178
当然可以!这是一个简单的 uni-app 弹出层代码示例:
```
<template>
<view class="container">
<button @tap="showModal">显示弹出层</button>
<uni-modal v-if="show" @confirm="onConfirm" @cancel="onCancel">
<view class="modal-content">这是弹出层的内容</view>
</uni-modal>
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showModal() {
this.show = true
},
onConfirm() {
console.log('用户点击了确认按钮')
this.show = false
},
onCancel() {
console.log('用户点击了取消按钮')
this.show = false
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
width: 80%;
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
</style>
```
在这段代码中,我们使用了 uni-modal 组件来实现弹出层。它有两个事件 @confirm 和 @cancel,分别在用户点击确认按钮和取消按钮时触发。通过控制 show 变量的值来控制 uni-modal 组件的显示和隐藏。
希望这个示例能帮助你实现你的需求。
阅读全文