加载

大约 3 分钟

加载图标，用于表示加载中的过渡状态。

通过以下方式来全局注册组件，更多注册方式请参考Vue3-Base说明。

const app = createApp()

const [Loading] = await VueBase.require(["nie.vue3.loading"]);
app.use(Loading);

app.mount("#app");

代码演示

作为图标单独使用。

<feg-loading />

作为容器使用，通过v-model控制默认插槽/图标是否显示。

<feg-loading v-model="loading" tag="button">按钮</feg-loading>

为其它组件添加指令，通过v-loading控制遮罩层图标是否显示。其中options参数为Loading的配置项，具体见props。

<div v-loading="loading">内容</div>
<div v-loading="[loading, options]">内容</div>

open会返回一个Loading实例，可通过调用close方法来关闭它。其中options参数为Loading的配置项，具体见props。

如果全局注册组件方式，那么会有一个全局方法$loading，它的调用方式为：this.$loading(options)，同样会返回一个Loading实例。

执行open方法时会返回Loading实例，通过修改实例上的options属性可以实现动态更新提示的效果。

const loading = Loading.open(options)
loading.options = options
Loading.close()

open默认采用单例模式，即同一时间只会存在一个Loading，如果需要在同一时间弹出多个Loading，可以通过组件方式，Teleport组件挂载到body。

<template>
    <Teleport to="body">
        <feg-loading v-model="loading" fullscreen />
    </Teleport>
</template>

参数	说明	类型	默认值
v-model	是否显示为加载状态	boolean	-
tag	根节点的`HTML`标签	string	`div`
disabled	图标是否禁用点击	boolean	`false`
icon	自定义加载图标`HTML`片段，因为容易导致`XSS`攻击，请确保内容是可信的	string	-
iconSize	加载图标大小，`css`带单位符合`width`和`height`规范的值	string	-
iconType	默认图标类型	"circular" \| "spinner"	`circular`
iconPosition	图标展示位置	"left" \| "right"	`left`
color	图标和文字颜色，`css`符合`color`规范的值	string	-
text	加载状态提示文字	string	-
textSize	文字大小，`css`带单位符合`font-size`规范的值	string	-
textColor	文字颜色，`css`符合`color`规范的值	string	-
vertical	是否垂直排列图标和文字内容	boolean	`false`
fullscreen	是否全屏`z-index: 1000`	boolean	`false`
mask	是否黑色背景遮罩`z-index: 10`	boolean	`false`

名称	说明	回调参数
click	加载图标点击事件，加载状态或者禁用状态下不触发	`event`
clickOverlay	黑色背景遮罩点击事件	`event`

组件提供了下列 CSS 变量，可用于自定义样式

名称	默认值	描述
--nie-loading-text-padding	`8px`	文字间距
--nie-loading-text-color	`#969799`	文字颜色
--nie-loading-text-font-size	`14px`	文字大小
--nie-loading-spinner-color	`#c8c9cc`	加载图标颜色
--nie-loading-spinner-size	`30px`	加载图标大小
--nie-loading-spinner-duration	`0.8s`	加载图标动画时间