uniapp圖片彈框效果

需求:點擊提交按鈕,提交成功后會彈出一個彈框,提示成功,點擊右上角的叉號或者我知道了,隱藏彈框效果。

<template>
    <view>  
    
        <form>
            <view class="uni-btn-v uni-common-mt">
                <button class="btn-submit" formType="submit" type="primary"@tap="showModal" data-target="Image">提交打卡</button>
            </view>
        </form>

        <view class="cu-modal" :class="modalName=='Image'?'show':''">
            <view class="cu-dialog">
                <view class="bg-img" style="background-image: url('../../static/img/alarm.png');height:250px;">
                    <view class="cu-bar justify-end text-white">
                        <view class="action" @tap="hideModal">
                            <text class="cuIcon-close "></text>
                        </view>
                    </view>
                </view>
                <view class="cu-bar bg-white">
                    <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                modalName: null,
            };
        },
        methods: {
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
        }
    }
</script>

<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
    .btn-submit {
        background-color: #1C2A86;
        margin: 100upx 20upx;
        color: #fff;
    }
</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容