提到uniapp自定义弹窗,,估计大部分人第一个想到的都是uni-popup这个弹窗效果,今天也尝试了一下,看到人家的效果图确实好看,但是对我这种不走小程序这条路的人不太友好,,浅浅学了vue,这里介绍一个自定义的弹窗方法。
如果你不想使用 uni-popup 组件来创建自定义弹窗,你可以通过以下步骤手动实现一个基本的自定义弹窗:
1、创建弹窗结构
:在你的页面的 template 中添加一个用于弹窗的容器,这个容器初始时应该是隐藏的。
html
<template>
<view class="mask" v-show="showModal"></view>
<view class="popup" v-show="showModal">
<!-- 这里是弹窗内容 -->
<text class="close-icon" @click="closePopup">X</text>
<view class="popup-content">
这里是弹窗内容...
</view>
<view class="popup-btns">
<button @click="confirmAction">确定</button>
<button @click="cancelAction">取消</button>
</view>
</view>
</template>
2、添加样式:
为弹窗和遮罩层添加 CSS 样式,确保它们在页面上正确显示。
css
css
<style scoped>
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF;
border-radius: 10px;
z-index: 1001;
padding: 20px;
width: 80%;
}
.close-icon {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
}
</style>
3、控制弹窗显示与隐藏:
在 Vue 实例的 data 中添加一个变量来控制弹窗的显示与隐藏,并在方法中添加打开和关闭弹窗的函数。
javascript
<script>
export default {
data() {
return {
showModal: false,
};
},
methods: {
openPopup() {
this.showModal = true;
},
closePopup() {
this.showModal = false;
},
confirmAction() {
// 确定按钮的逻辑
this.closePopup();
},
cancelAction() {
// 取消按钮的逻辑
this.closePopup();
},
},
};
</script>
4、触发弹窗:
你可以在需要的时候(例如点击一个按钮)调用 openPopup 方法来显示弹窗。
html
<button @click="openPopup">打开弹窗</button>
通过这种方式,你可以创建一个简单的自定义弹窗,并且可以根据需要进一步自定义样式和行为。这只是一个基础示例,你可以根据具体需求添加动画效果、更复杂的布局和交互逻辑。