学习uniapp 弹窗做法

c1728733689

已于 2024-09-23 16:48:50 修改

阅读量234

点赞数 4

文章标签：学习 uni-app

于 2024-09-23 16:47:55 首次发布

本文链接：https://blog.csdn.net/c1728733689/article/details/142462082

版权

因为设计需要用到点击按钮跳出弹窗自学了一个弹窗

大致思路：

1.在当前页面显示一个新的盒子（遮罩层），新的盒子高度设置100vh和可视高度相同，黑色背景和半透明rgba(0, 0, 0, .5)，营造一种底下图层被遮盖的感觉

2.遮罩层中添加盒子，调整盒子的位置（居中？显示在上面？显示在下面？看个人需求！）

3.在盒子中添加子元素丰富盒子内容

4.绑定事件，默认状态隐藏遮罩层以及内容，点击显示按钮显示遮罩层（跳出弹窗），点击提交、取消按钮（隐藏弹窗）

展示一下自学的uniapp弹窗做法的代码：

<template>
    <view class="title">
        <view class="title_leftbox"></view>
        <view class="title_middlebox">
            <view class="titlenr_text1">这是标题内容</view>
        </view>
        <view class="title_rightbox">
            <view class="title_text2">返回</view>
            <view class="title_imgbox">
                <image class="title_img" src="../../static/logo.png"></image>
            </view>
        </view>
    </view>

    <view class="buttonbox">
        <view class="button" @click="showAlert">弹窗</view>
    </view>
	<!-- 这里是弹窗部分 -->
    <view class="alert" v-if="isAlertVisible">
        <view class="alert-body">
            <view class="alert-title">弹窗标题</view>
            <view class="alert-content">弹窗内容</view>
            <view class="alert-close" @click="closeAlert">关闭</view>
        </view>
    </view>
	<!-- 上面是弹窗部分 -->
</template>

<script>
export default {
    data() {
        return {
            isAlertVisible: false
        };
    },
    methods: {
        showAlert() {
            this.isAlertVisible = true;
        },
        closeAlert() {
            this.isAlertVisible = false;
        }
    }
};
</script>

<style>
    .title {
        background-color: dodgerblue;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2%;
    }

    .title_leftbox,
    .title_rightbox {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .title_leftbox {
        background-color: pink;
        height: 15rpx;
    }

    .title_middlebox {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .title_text2 {
        margin-right: 10%;
        margin-left: 25%;
    }

    .title_imgbox {
        display: flex;
        align-items: center;
    }

    .title_img {
        width: 34rpx;
        height: 34rpx;
    }

    .button {
        background-color: aquamarine;
        font-size: 26rpx;
        font-weight: 500;
        color: white;
        text-align: center;
    }

    /* 遮罩层 */
    .alert {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 0;
    }

    .alert-body {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
    }

    .alert-close {
        float: right;
        cursor: pointer;
    }
</style>

效果图: