📦 v-loading-directive

A lightweight ant-design-vue and Vue 3 directive for showing loading overlay on any DOM element.

🚀 Features

• Simple and customizable loading mask
• Supports multiple binding formats: boolean, string, object
• Compatible with Vue 3 projects (both Composition API and <script setup>)

📦 Installation

npm install ant-design-vue3-loading-directive

Or via yarn:

yarn add ant-design-vue3-loading-directive

🔧 Usage

1. Register the directive in your Vue app:

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import LoadingDirective from 'ant-design-vue3-loading-directive'

const app = createApp(App)

app.directive('loading', LoadingDirective)

app.mount('#app')

2. Use it in your template:

Basic usage (boolean)

<template>
  <div v-loading="isLoading">Content area</div>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

setTimeout(() => {
  isLoading.value = false
}, 2000)
</script>

With custom tip message

<div v-loading="'Loading data...'"></div>

With object options

<div v-loading="{ spinning: isLoading, tip: 'Fetching data...', size: 'large' }"></div>

🧩 Directive Binding Formats

| Format | Description | |--------|-------------| | boolean | true shows loading, false hides it | | string | Sets the loading tip text (v-loading="'Custom Tip'") | | object | Full control: { spinning: true, tip: 'Custom', size: 'small' \| 'default' \| 'large' } |

⚙️ Configuration Options

| Property | Type | Default | Description | |---------|------|---------|-------------| | spinning | Boolean | true | Whether to show loading | | tip | String | '加载中...' | Custom tip text | | [size](file://d:\project@ant-design-vue3 v-loading\loading\index.js#L647-L649) | String | 'small' | Size of the spinner (small, default, large) |

🧪 Development

To build the package yourself:

git clone https://github.com/yourname/v-loading-directive.git
cd v-loading-directive
npm install
npm run build

The built files will be in the dist/ folder.

📜 License

MIT License