v-if和v-else解决闪烁问题

最新推荐文章于 2024-08-03 20:32:29 发布

yu_zheng5163

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量391

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_56095048/article/details/140852123

版权

<template>
  <div v-cloak>
    <div v-if="loading">
      <!-- 显示加载中的状态 -->
      <div class="loading-indicator">
        <el-spin></el-spin> <!-- Element UI 的加载动画 -->
        <p>加载中，请稍候...</p>
      </div>
    </div>
    <div v-else-if="rolesData.includes('admin','commonAdmin')">
      <!-- 当角色数据加载完成且包含 'admin' 或 'commonAdmin' 时显示的内容 -->
      <panel-group @handleSetLineChartData="handleSetLineChartData" />
      <!-- ... 其他内容 -->
    </div>
    <div v-else>
      <!-- 当角色数据加载完成但不包含 'admin' 或 'commonAdmin' 时显示的内容 -->
      <div class="centered-content">
        <h1>诚信考试!!!</h1>
        <div class="clock">
          {{ currentTime }}
        </div>
        <el-button type="primary" size="medium" icon="el-icon-thumb" @click="gotoExam()" style="height:60px ;width:180px">进入考试</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// ... 其他代码保持不变

export default {
  // ... 其他代码保持不变
  data() {
    return {
      // ... 其他数据保持不变
      loading: true, // 初始状态设置为 true，表示正在加载
    };
  },
  created() {
    this.getList().then(() => {
      this.loading = false; // 数据加载完成后，将 loading 设置为 false
    });
  },
  // ... 其他代码保持不变
};
</script>

<style>
/* ... 其他样式保持不变 */
.loading-indicator {
  text-align: center;
  padding: 20px;
}
</style>