需求：點(diǎn)擊提交按鈕筑舅，提交成功后會(huì)彈出一個(gè)彈框媒吗，提示成功，點(diǎn)擊右上角的叉號(hào)或者我知道了坝疼，隱藏彈框效果搜贤。
<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>
