loading指令

用于防抖，占位

使用

import App from './App.vue'
import { loadingDirective } from 'li-daisy'

const app = createApp(App)

<!-- 自定义指令名称 这里假定为loading -->
app.directive('loading',loadingDirective)

基础用法

通过 v-loading 指令去绑定 loading 状态

开启 loading1

关闭 loading1

切换 loading1

这是一个块级容器

该加载状态由loading1控制

这是另外一个块级容器

该加载状态由loading2控制

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center justify-around gap-3">
      <div class="btn" @click="setTrue">开启 loading1</div>
      <div class="btn" @click="setFalse">关闭 loading1</div>
      <div class="btn" @click="toggle">切换 loading1</div>
    </div>

    <div
      v-loading:infinity="loading1"
      class="mx-auto border border-base-300 rounded-lg p-4 w-[280px] h-[120px] relative"
    >
      <div>这是一个块级容器</div>
      <div class="text-sm opacity-70">该加载状态由loading1控制</div>
    </div>

    <div
      v-loading:bars.neutral.xs="loading2"
      class="mx-auto border border-base-300 rounded-lg p-4 w-[280px] h-[120px] relative"
    >
      <div>这是另外一个块级容器</div>
      <div class="text-sm opacity-70">该加载状态由loading2控制</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const loading1 = ref(true)
const toggle = () => (loading1.value = !loading1.value)
const setTrue = () => (loading1.value = true)
const setFalse = () => (loading1.value = false)

const loading2 = ref(true)
</script>

参数/对象设置

通过指令的参数（arg）、修饰符（modifiers）或 value 对象来灵活配置 v-loading

• 布尔模式（仅控制显隐）

  <div v-loading="loading">…</div>

• 参数模式（指定 type）

  <div v-loading:ball="loading">type=ball</div>

• 修饰符模式（指定 type、color、size）

  <div v-loading:bars.error.xs="loading">type=bars, color=error, size=xs</div>

• 对象模式（同时配置多个属性）

  <div
    v-loading="{ visible: loading, type: 'ring', color: 'accent', size: 'lg' }"
  >…</div>

开启 loading

关闭 loading

切换 loading

<template>
  <div class="flex flex-col gap-6">
    <div class="flex items-center justify-around gap-3">
      <div class="btn" @click="setTrue">开启 loading</div>
      <div class="btn" @click="setFalse">关闭 loading</div>
      <div class="btn" @click="toggle">切换 loading</div>
    </div>

    <div class="flex flex-col gap-8 mt-4 items-center">
      <!-- 参数模式：type=ball -->
      <div
        v-loading:ball="loading"
        class="border border-base-300 rounded-lg p-4 w-64 h-32 relative"
      ></div>
      <!-- 修饰符模式：type=bars, color=error, size=xs -->
      <div
        v-loading:bars.error.xs="loading"
        class="border border-base-300 rounded-lg p-4 w-64 h-32 relative"
      ></div>

      <!-- 对象模式：同时配置 visible/type/color/size -->
      <div
        v-loading="{ visible: loading, type: 'ring', color: 'accent', size: 'lg' }"
        class="border border-base-300 rounded-lg p-4 w-64 h-32 relative"
      ></div>
    </div>
  </div>
</template>

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

const loading = ref(true)
const toggle = () => (loading.value = !loading.value)
const setTrue = () => (loading.value = true)
const setFalse = () => (loading.value = false)
</script>

参数说明

1. 可选参数来源

• value（布尔或对象）
  • 布尔：控制显隐
  • 对象：可同时设置 visible / type / color / size
• arg（位置参数）
  • 同时可作为 type / color / size
• modifiers（修饰符）
  • 逐项指定 type / color / size

2. 参数规则

属性	所在位置	类型	可选值	默认值
visible	value (boolean)	boolean	true / false	false
type	value / arg / modifiers	string	spinner / dots / ring / ball / bars	spinner
color	value / arg / modifiers	string	primary / secondary / accent / neutral / info / success / warning / error	primary
size	value / arg / modifiers	string	xs / sm / md / lg / xl	md

3. 优先级

value > arg = modifiers