v-loading 加载

代码演示

基础用法

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

defineOptions({
  name: 'DirectiveBasic',
})

const loading = ref(false)
</script>

<template>
  <a-alert
    v-loading="loading"
    description="Further details about the context of this alert."
    message="Alert message title"
  />
  <div class="mt-8-2">
    Loading state：
    <a-switch v-model:checked="loading" />
  </div>
</template>

<style lang="less" scoped></style>

自定义描述文案

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

defineOptions({
  name: 'DirectiveDescription',
})

const loading = ref(false)
</script>

<template>
  <a-alert
    v-loading="loading"
    description="Further details about the context of this alert."
    loading-description="加载中"
    loading-description-style="color: green;"
    message="Alert message title"
  />
  <div class="mt-8-2">
    Loading state：
    <a-switch v-model:checked="loading" />
  </div>
</template>

<style lang="less" scoped></style>

API

Props

名称	说明	类型	默认值
loading-description	描述文字	string	-
loading-description-style	描述文字样式	string	-