v-loading 指令

概述

• 为容器添加加载遮罩，支持布尔或对象配置；可自定义文本、背景与图标。

示例

查看代码

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)

/**
 * 函数：切换加载状态
 *
 * 演示布尔与对象两种绑定方式
 */
function toggle() {
  loading.value = !loading.value
}
</script>

<template>
  <n-flex vertical>
    <div style="position: relative; width: 300px; height: 160px; border: 1px solid #eee;">
      <!-- 布尔值：显示/隐藏 loading -->
      <div v-loading="loading">
        布尔加载示例
      </div>
    </div>

    <div style="position: relative; width: 300px; height: 160px; border: 1px solid #eee; margin-top: 12px;">
      <!-- 对象：自定义文本/背景/图标 -->
      <div v-loading="{ show: loading, text: '加载中...', background: 'rgba(0,0,0,0.7)' }">
        对象加载示例
      </div>
    </div>

    <n-button @click="toggle">
      切换加载
    </n-button>
  </n-flex>
</template>

组合示例

模式	用法示例	说明
布尔模式	v-loading="isLoading"	传入布尔值控制遮罩显隐；默认使用全局配置的加载文案与样式
对象模式	v-loading="{ show, text, background, spinner }"	支持细粒度配置： - show: boolean：是否显示遮罩 - text: string：加载提示文案 - background: string：遮罩背景色（支持透明度） - spinner: string：自定义加载动画类名或类型