v-loading 加载

代码演示

基础用法

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

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

defineOptions({
    name: 'DirectiveBasic',
})

const loading = ref(false)
</script>

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

自定义描述文案

<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"></a-alert>
    <div class="mt-8-2">
        Loading state：
        <a-switch v-model:checked="loading"></a-switch>
    </div>
</template>

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

defineOptions({
    name: 'DirectiveDescription',
})

const loading = ref(false)
</script>

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

API

Props

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