使用场景
统一访问加载服务与指令，并可用于应用级注册。
通过组合入口使用指令
SFC 局部注册不要求应用全量安装。
通过组合入口使用指令
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: 'AsamLoadingBasicDemo' });
import { ref } from 'vue';
import { AsamInput, AsamButton, AsamLoading } from '@asam-ui/ui';
const vAsamLoading = AsamLoading.directive;
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 {
position: relative;
min-height: 140px;
}
</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: 'AsamLoadingBasicDemo' });
import { ref } from 'vue';
import { AsamInput, AsamButton, AsamLoading } from '@asam-ui/ui';
const vAsamLoading = AsamLoading.directive;
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 {
position: relative;
min-height: 140px;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
AsamLoading.service 指向 加载服务，AsamLoading.directive 指向 加载指令。app.use(AsamLoading) 注册 asam-loading 指令和 $asamLoading；它是组合对象，不是 Vue 标签组件。
选择局部或全屏用法
服务参数与返回实例见加载服务页面；指令绑定值、修饰符和生命周期见加载指令页面。组合入口只说明 service、directive、install 的关系。
基本用法
局部表格加载已归到加载指令。
自定义文字与加载图案
完整示例见加载指令。
全屏
API
服务 AsamLoading
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
service | 创建加载实例；完整参数与返回实例见加载服务页面。 | typeof AsamLoadingService | — |
directive | 加载指令；绑定值、修饰符与生命周期见加载指令页面。 | typeof AsamLoadingDirective | — |
install | 通过 app.use(AsamLoading) 注册指令和应用加载服务。 | (app: App) => void | — |
关联组件
参数与事件补充说明
参数与事件说明
service
必填：是；声明来源：ASAM 声明。
directive
必填：是；声明来源：ASAM 声明。
install
必填：是；声明来源：ASAM 声明。
AsamLoading 公开类型视图
ts
const AsamLoading: {
service: typeof AsamLoadingService;
directive: typeof AsamLoadingDirective;
install(app: App): void;
}