uniapp app的弹窗代码
时间: 2023-08-27 10:05:02 浏览: 309
以下是一个简单的 uniapp 弹窗代码:
1. 在 template 中添加弹窗组件
```html
<template>
<view>
<button @click="showModal">点击弹窗</button>
<modal v-model="showModalFlag">
<view>这里是弹窗内容</view>
</modal>
</view>
</template>
```
2. 在 script 中添加 data 和方法
```js
<script>
export default {
data() {
return {
showModalFlag: false
};
},
methods: {
showModal() {
this.showModalFlag = true;
}
}
};
</script>
```
3. 在 style 中添加弹窗样式
```css
<style>
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal__content {
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
}
</style>
```
这样就可以实现一个简单的 uniapp 弹窗了。
阅读全文