特喵的又被自己狠坑了一把……
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版权协议,转载请附上原文出处链接和本声明。