需求：点击提交按钮，提交成功后会弹出一个弹框，提示成功，点击右上角的叉号或者我知道了，隐藏弹框效果。
<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>
