v-loading.fullscreen.lock

在Vue中，v-loading是一个自定义指令，用于显示加载状态的可复用指令。而v-loading.fullscreen.lock是v-loading指令的一种配置形式，用于在全屏加载时锁定页面。

通常，v-loading指令被用于在异步操作期间显示加载状态，以提供反馈给用户。当使用v-loading.fullscreen.lock配置时，加载状态会覆盖整个页面，并且阻止用户对页面的交互。

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>

    <!-- 使用v-loading.fullscreen.lock指令 -->
    <div v-loading.fullscreen.lock="loading">
      <!-- 数据展示区域 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true;

      // 异步请求数据
      // 在请求完成后，将loading设置为false，加载状态会自动消失
      // 例如：使用axios发送请求的示例
      axios.get('https://api.example.com/data')
        .then(response => {
          // 处理数据
          this.loading = false;
        })
        .catch(error => {
          // 处理错误
          this.loading = false;
        });
    }
  }
}
</script>