使用场景
vAsamLoading 是 AsamLoadingDirective 的公开别名。SFC 中按需导入后即可使用 v-asam-loading。
状态、动态文字与卸载
切换遮罩、修改提示文字，并卸载目标观察清理。
状态、动态文字与卸载
vue
<template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="loading = !loading"
>切换加载</AsamButton
>
<label>
<span>提示文字</span>
<AsamInput v-model="text" />
</label>
<AsamButton type="default" native-type="button" @click="mounted = !mounted"
>卸载/恢复区域</AsamButton
>
</div>
<div
v-if="mounted"
v-asam-loading="loading"
v-bind="{ 'element-loading-text': text, class: 'loading-target' }"
>
<p class="example-paragraph">局部内容区域</p>
</div>
<p class="example-paragraph" role="status">{{ loading ? '加载中' : '加载已结束' }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'vAsamLoadingBasicDemo' });
import { ref } from 'vue';
import { AsamInput, AsamButton, vAsamLoading as vAsamLoading } from '@asam-ui/ui';
const loading = ref(false);
const text = ref('正在加载');
const mounted = ref(true);
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
.loading-target {
min-height: 140px;
position: relative;
padding: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="loading = !loading"
>切换加载</AsamButton
>
<label>
<span>提示文字</span>
<AsamInput v-model="text" />
</label>
<AsamButton type="default" native-type="button" @click="mounted = !mounted"
>卸载/恢复区域</AsamButton
>
</div>
<div
v-if="mounted"
v-asam-loading="loading"
v-bind="{ 'element-loading-text': text, class: 'loading-target' }"
>
<p class="example-paragraph">局部内容区域</p>
</div>
<p class="example-paragraph" role="status">{{ loading ? '加载中' : '加载已结束' }}</p>
</template>
<script setup>
defineOptions({ name: 'vAsamLoadingBasicDemo' });
import { ref } from 'vue';
import { AsamInput, AsamButton, vAsamLoading as vAsamLoading } from '@asam-ui/ui';
const loading = ref(false);
const text = ref('正在加载');
const mounted = ref(true);
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
.loading-target {
min-height: 140px;
position: relative;
padding: var(--asam-space-lg);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>完整指令契约
绑定值、fullscreen/body/lock 修饰符、局部与全屏示例、更新和卸载行为统一见加载指令。服务参数与实例见加载服务。本快捷入口不另设一份重复的参数表。
API
本入口共用 AsamLoadingDirective 的完整公开契约。参数、事件、插槽与实例方法集中展示于该页面。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。