uniapp cover-image、cover-view无法用v-if控制的解决办法

v-if无法控制

v-if是用于控制标签是否渲染到界面的，但是对于cover-image、cover-view，只会在初次时生效，后面动态更改的话，是无效的。如下，isPlaying在代码中更改为true，依然无法隐藏

		<cover-image class="video_play" src="../../../static/icon/icon_play.png" @click="doPlayVideo"></cover-image>
	

退而求其次的解决办法：

用css的方式来处理，设置一个风格，宽高的值均为0，top：0，left:0，让他躲到左上角去。

css:

.unshow{
	width: 0rpx;
	height: 0rpx;
	position: absolute;
	top: 0rpx;
	left: 0rpx;
}	

标签代码中这样操作：

<cover-image :class="isPlaying ? 'unshow':'video_play'" src="../../../static/icon/icon_play.png" @click="doPlayVideo"></cover-image>

完整代码

<template>
	<view class="root">
		
		<!-- <image src="/storage/emulated/0/Android/data/com.lanling.workerunion/cache/1928gongyouhui_1655365152417.jpg" style="height: 750rpx;width: 1000rpx;"></image> -->
		<video id="videoObj" :src="filepath" ref="videoObj" class="video" @ended="onPlay2End" controls="false"></video>
		<!-- <cover-image class="video_cover" :src="filepath+'?vframe/jpg/offset/0'"></cover-image> -->
		<cover-image :class="isPlaying ? 'unshow':'video_cover'" :src="filepath+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></cover-image>
		<cover-image :class="isPlaying ? 'unshow':'video_play'" src="../../../static/icon/icon_play.png" @click="doPlayVideo"></cover-image>
	
		<cover-view class="btn1 fontSize16px" v-if="showUpload === 1 || showUpload === '1'" @click.stop="doUploadVideo">{{isUpload ? uploadProgress:'上传视频'}}</cover-view>
		<cover-view class="fontSize16px" :class="showUpload === 1 || showUpload === '1' ? 'btn2':'btn3'" @click.stop="gotoMakeVideo">重新录制</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUpload: false,
				uploadProgress:0,
				filepath:'',
				isPlaying:false,
				showUpload:1, // 1|显示上传按钮  0|其他|不显示上传
				videoContext:undefined,
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('videoObj');	
		},
		onLoad(options) {
			this.showUpload = options.showUpload
			// /storage/emulated/0/DCIM/Camera/video1653971234354.mp4
			this.filepath = options.filepath;
			
			console.error("11文11件111路21径1：",this.showUpload);
		},
		methods: {
			onPlay2End(){
				this.isPlaying = false;
			},
			doPlayVideo(){
				console.error("点击播放0");
				// let video = uni.createVideoContext('videoObj', this);
				if(this.videoContext){
					console.error("点击播放1",this.isPlaying);
					this.isPlaying = true;
					console.error("点击播放2",this.isPlaying);
					this.videoContext.play();
				}
				// this.$refs.videoObj.play();
				// this.play = true;
			},
			gotoMakeVideo(){
				uni.redirectTo({
					url:'/pages/module/videoresume/videoresume'
				})
			},
			doUploadVideo(){
				const $that = this;
				const path = this.filepath;
				const urlPath = $that.$commonJs.network.API.api_upload_videoresume;
				console.error("开始上传111",path);
				
				$that.isUpload = true;
				$that.uploadProgress = -1;
				
				let uploadTask = $that.$commonJs.network.doUploadFileAction({
					url:urlPath,
					filePath:path,
					name:'file',
					success:(res)=>{
						console.error("上传成功！",res);
						
						if(res.statusCode === 200){
							$that.isUpload = false;
							uni.showToast({
								title:'上传成功 ~ 等待审核',
								icon:'none'
							})
							return;
						}
					},
					fail:()=>{
						$that.isUpload = false;
						console.error("上传失败！");
					}
				});
				console.error("开始上传222");
				
				uploadTask.onProgressUpdate((res=>{
					console.log('上传进度' + res.progress);
					if($that.uploadProgress != res.progress){
						$that.uploadProgress = res.progress + '%';
					}
					// console.log('已经上传的数据长度' + res.totalBytesSent);
					// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					
					if (res.progress >= 100) {
						$that.isUpload = false;
						// 取消上传任务。
						// uploadTask.abort();
					}
				}))
			},
			loadData(){
				let $that = this;
				const urlPath = $that.$commonJs.network.API.api_do_signin;
				$that.$commonJs.network.doGet({
					url: urlPath,
					success: (res) => {
						console.error("签到结果：",res);
					},
				});	
			}
		}
	}
</script>

<style>
.unshow{
	width: 0rpx;
	height: 0rpx;
	position: absolute;
	top: 0rpx;
	left: 0rpx;
}	
.root{
	width: calc(100vw);
	height: calc(100vh);
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	/* justify-content: center; */
}
.video_play{
	position: absolute;
	width: 150rpx;
	height: 150rpx;
	top: calc(50vh - 75rpx);
	left: calc(50vw - 75rpx);
}
.video_cover{
	position: absolute;
	width: calc(100vw);
	height: calc(100vh);
	top: 0rpx;
	bottom: 0rpx;
	left: 0rpx;
	right: 0rpx;
}

.video{
	position: absolute;
	width: calc(100vw);
	height: calc(100vh);
	top: 0rpx;
	bottom: 0rpx;
	left: 0rpx;
	right: 0rpx;
}
.action_bar_layout{
	display: flex;
	flex-direction: row;
	width: calc(100vw);
	color: white;
	align-content: space-between;
}
.btn1{
	background: #CE3D3A;
	border-radius: 8px;
	color: #fff;
	font-weight: 400;
	width: calc(50vw - 10rpx);
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-bottom: 15rpx;
	left: 0rpx;
	bottom: 0rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
}
.btn2{
	background: #CE3D3A;
	border-radius: 8px;
	color: #fff;
	font-weight: 400;
	width: calc(50vw - 10rpx);
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-bottom: 15rpx;
	right: 0rpx;
	bottom: 0rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
}
.btn3{
	background: #CE3D3A;
	border-radius: 8px;
	color: #fff;
	font-weight: 400;
	width: calc(100vw - 20rpx);
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-bottom: 15rpx;
	right: 0rpx;
	bottom: 0rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
}
</style>