uview模态框
时间: 2023-08-16 17:13:25 浏览: 167
uView 提供了一种名为 `uni-popup` 的组件,可以用来创建模态框。这个组件非常灵活,可以自定义模态框的位置、大小、动画等属性。
下面是一个简单的例子:
```html
<template>
<view>
<button @click="showPopup">显示模态框</button>
<uni-popup v-model="popupVisible" :duration="300">
<view class="popup-content">
<text>这是模态框的内容</text>
<button @click="closePopup">关闭</button>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
popupVisible: false
};
},
methods: {
showPopup() {
this.popupVisible = true;
},
closePopup() {
this.popupVisible = false;
}
}
};
</script>
```
在上面的代码中,我们创建了一个按钮和一个 `uni-popup` 组件。当用户点击按钮时,`popupVisible` 被设置为 `true`,模态框就会显示出来。模态框的内容包含一个文本和一个按钮,点击按钮可以关闭模态框。
为了让模态框有动画效果,我们还传递了一个 `duration` 属性,表示动画的持续时间(单位为毫秒)。
你可以根据业务需求,自定义模态框的样式和行为。
阅读全文