ant-design-vue3-loading-directive/README.md

ant-design-vue loading directive

# 📦 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

```bash
npm install ant-design-vue3-loading-directive
```

Or via yarn:

```bash
yarn add ant-design-vue3-loading-directive
```

## 🔧 Usage

### 1. Register the directive in your Vue app:

```js
// 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)

```vue
<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

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

#### With object options

```vue
<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:

```bash
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