【VUE】过渡页面加载动画

我们的前端界面经常需要跳转时做等待过渡页面，可以使用以下方式进行过渡，供参考

1、自定义加载文案、图标和背景色

<template>
  <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
       ],
        loading: true
      };
    }
  };
</script>

2、点击按钮的方式整页加载

<template>
  <el-button
    type="primary"
    @click="modifyJvmRequest"
    v-loading.fullscreen.lock="Loading">
    点击
  </el-button>

<script>
  export default {
    data() {
      return {
        Loading: false
      }
    },
    methods: {
      modifyJvmRequest() {
        this.Loading = true;
        setTimeout(() => {
          this.Loading = false;
        }, 2000);
      },