v-loading.fullscreen.lock初始化后第一次点击无效

特喵的又被自己狠坑了一把……
v-loading.fullscreen.lock 页面初始化后第一次点击无效,第二次及之后就都正常了
当时有这么个布局:

<el-container>
	<el-header>	
		</el-form>
			......	......
			<el-button type="primary" :style="commonButtonStyle" @click="handleClickQueryCloudData">云端查询</el-button>
		</el-form>
	</el-header>
	<el-main v-if='isShowDetail' v-loading.fullscreen.lock='fullscreenIsLoading' :element-loading-text='fullscreenLoadingText'>
		<div>
			......	......
			<el-button type='primary' plain @click="handleClickSaveCloudData">同步到本地</el-button>
		</div>
	</el-main>
</el-container>
handleClickQueryCloudData() {
   this.fullscreenIsLoading = true;
   this.fullscreenLoadingText = '正在从云端获取数据,可能耗时较久,请稍等!';
   ......	......
},

我希望点击 ‘云端查询 ’ 或者 ‘同步到本地 ’ 这俩按钮时都会进入 全屏锁定加载中 的状态,
问题就在于我把 v-loading.fullscreen.lock 设置在了el-main,而isShowDetail的初始状态又是 false,
所以每次页面初始化后的第一次点击无效,第二次及之后点击就可以正常锁定全屏了

解决办法就是

<el-container  v-loading.fullscreen.lock='fullscreenIsLoading' :element-loading-text='fullscreenLoadingText'>
	# ^^^挪上来
	
	......	......
</el-container>

代码就像生活,有些看似无理取闹莫名其妙的bug其实都是有迹可循有因才有果的。


版权声明:本文为weixin_45915769原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。