uniapp uni-popup change 记录一个小功能
监听 pop 页面的显示与隐藏;
<template>
<uni-popup ref="popup" type="bottom" background-color="#ffffff" @change="change" @maskClick="maskClick">
<view class="pop-content">
<view class="audio-top">
<view class="top-left" @click="onCancel()">
取消
</view>
<view class="top-right" @click="onComfirm()">
完成
</view>
</view>
<view class="audio-conetnt">
<image src="/static/animation/audio-record-pink.gif" mode=""></image>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
data() {
return {
eventStartAudio: 'safetydetial-startaudio',
eventCancelAudio: 'recordaduio-cancelaudio',
eventStopAudio: 'recordaduio-stopaudio',
timer: null,
}
},
mounted() {
console.log("pop mounted")
uni.$on(this.eventStartAudio, args => {
this.onOpen()
})
},
methods: {
onOpen() {
this.$refs.popup.open()
},
change(e) {
console.log("closeMask:", e)
// 显示或者隐藏的时候都 清除定时器
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
//显示的时候启动定时器
if (e.show) {
this.timer = setTimeout(() => {
this.onComfirm()
}, 5 * 1000);
}
},
maskClick() {
console.log("maskClick")
uni.$emit(this.eventCancelAudio)
},
onCancel() {
console.log("onCancel")
this.$refs.popup.close()
uni.$emit(this.eventCancelAudio)
},
onComfirm() {
console.log("onComfirm")
this.$refs.popup.close()
uni.$emit(this.eventStopAudio)
}
},
destroyed() {
uni.$off(this.eventStartAudio)
}
}
</script>
<style lang="scss" scoped>
.pop-content {
width: 100%;
height: 350rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
.audio-top {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
border-bottom: 1px solid #dddddd;
.top-left {
margin-left: 24rpx;
padding: 2px 8rpx;
border: 1px solid #1D69F9;
border-radius: 6rpx;
}
.top-right {
margin-right: 24rpx;
padding: 2px 8rpx;
border: 1px solid #1D69F9;
border-radius: 6rpx;
}
}
.audio-conetnt {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
image {
width: 200rpx;
height: 200rpx;
}
}
}
</style>