在VUE项目中两个不同的地方，怎么判断后面的地方记载完毕？

Question

初次加载页面的时候头部优先加载完毕，body还没有加载完成，如何禁止头部的保存按钮的点击事件，等待整个页面加载完毕后才可以使用？
页面如下：

头部和身体是两个不同的文件生成的
头部代码如下：
template代码如下：

<div class="editor-header lay-fx lay-ai-c lay-jc-sb bd-b">
    <div>
        <ul class="lay-fx lay-ai-c">
            <li>
                <el-popover
                class="fn-csp"
                placement="bottom"
                width="350"
                trigger="click"
                v-model="hintState">
                    
                    <topbar-page-dropdown v-if="hintState"></topbar-page-dropdown>
                    <span slot="reference">
                        {{ $t('当前页面') }} 
                        {{ $store.getters['posts/current'].title }}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                </el-popover>
            </li>
            <li>
                <Icon
                icon="dashicons-veditor-tj"
                class="fn-csp"
                size="22"
                :title="$t('添加组件')"
                @click="openComponentsPanel"></Icon>
            </li>
            <li>
                <Icon
                icon="dashicons-veditor-shangyibu"
                class="fn-csp"
                size="22"
                :title="$t('上一步')"
                :disable="!prevHistory.length"
                :loading="prevLoading"
                @click="changeHistoryPrev"></Icon>
            </li>
            <li>
                <Icon
                icon="dashicons-veditor-xiayibu"
                class="fn-csp"
                size="22"
                :title="$t('下一步')"
                :disable="!nextHistory.length"
                :loading="nextLoading"
                @click="changeHistoryNext"></Icon>
            </li>
            <li>
                <Icon
                icon="dashicons-veditor-baocun"
                class="fn-csp handle-save"
                size="22"
                :title="$t('保存')"
                ref="saveBTN"
                :loading="saveLoading"
                @click="save"></Icon>
            </li>
            <li v-show="postsType === 'page'">
                <Icon
                icon="dashicons-veditor-shezhi"
                class="fn-csp"
                size="22"
                :title="$t('全局设置')"
                @click="openSiteSettingPanel"></Icon>
            </li>
            <li v-if="YunEditor.debug || YunEditor.permission.includes('ms')">
                <Icon
                icon="dashicons-format-standard"
                class="fn-csp"
                size="22"
                :title="$t('素材')"
                @click="openMaterialPanel"></Icon>
            </li>
        </ul>
    </div>

    <div>
        <ul class="lay-fx lay-ai-c">
            <li>
                <i class="el-icon-turn-off f-s-22 fn-csp" 
                :title="$t('隐藏头部')" 
                @click="hideHeader"></i>
            </li>
            <li>
                <i
                :title="$t('隐藏编辑框')"
                class="el-icon-view f-s-22 fn-csp"
                @click="hideEditTool"></i>
            </li>
            <li v-if="YunEditor.language">
                <languages-select></languages-select>
            </li>
            <li>
                <window-size-select></window-size-select>
            </li>
            <li v-show="postsType === 'page'">
                <Icon
                icon="dashicons-welcome-view-site"
                class="fn-csp"
                size="22"
                :title="$t('查看页面')"
                @click="openPageView"></Icon>
            </li>
        </ul>
    </div>
</div>

js代码如下：

 mounted() {
        // 此处是我通过定时器延迟实现的，但不准确，有时候下方页面2秒内不一定能够加载完成
        // setTimeout(()=>{
        //     if(this.$refs.saveBTN !== undefined){
        //         this.$refs.saveBTN.$el.style['pointer-events'] = "none"
        //         this.$refs.saveBTN.$el.parentNode.style.cursor  = "not-allowed"
        //     }
        // },200)
        // setTimeout(() => {
        //     this.$nextTick(()=>{
        //         this.$refs.saveBTN.$el.style['pointer-events'] = "auto"
        //         this.$refs.saveBTN.$el.parentNode.style.cursor  = "pointer"
        //     })
        // }, 2000);
    },

Answer 1

可以先把按钮禁用，然后使用window.onload事件，window.onload事件会在整个页面及所有资源都加载完成后触发