Kits UI🌟

Appearance

On this page

Loading 加载 ​

加载数据时显示动效。

kits-ui 提供了两种调用 Loading 组件的方法：组件和服务。
对于组件，只需要绑定 boolean 值即可。
默认状况下，Loading 遮罩会插入到插槽的子节点。如果组件内默认插槽是空的，可以使遮罩插入至 Dom 中的 body 上。

区域加载 ​

全屏加载 ​

loading 组件内没有传入 slot 自动成为全屏的 loading

全局加载(函数调用) ​

loading 组件内没有传入 slot 自动成为全屏的 loading

渲染模式 ​

组件提供了insert(插入)、wrap(包裹)两种渲染模式：

  • insert：在插入模式下会把 loading 插入到 loading 的插槽下，如果插槽内有多个根元素也只会对第一个根元素生效
  • wrap: 包裹模式下会把插槽内所有的元素用 div 包裹起来

默认模式是 insert。

insert ​

该例子的 loading 组件包裹了两个 table，但只对第一个 table 生效

wrap ​

该例子的 loading 组件包裹了两个 table，对两个 table 都会生效

具名插槽 ​

icon ​

插入 icon 插槽，替换 loading icon

text ​

插入 text 插槽，替换 loading text

Loading API ​

typescript
export interface LoadingOptions {
  modelValue: boolean | Ref<boolean>;
  closeOnClick?: boolean;
  text?: string | ComputedRef<string>;
  background?: string;
  customClass?: string;
  zIndex?: number;
  mode?: 'insert' | 'wrap';
}
export function showLoading(props: LoadingOptions): { close: () => void };
export interface LoadingOptions {
  modelValue: boolean | Ref<boolean>;
  closeOnClick?: boolean;
  text?: string | ComputedRef<string>;
  background?: string;
  customClass?: string;
  zIndex?: number;
  mode?: 'insert' | 'wrap';
}
export function showLoading(props: LoadingOptions): { close: () => void };
方法名说明入参出参
showLoading通过调用函数的方式打开 loadingLoadingOptions-返回一个带有 close 方法的对象

Loading 属性 ​

属性名说明类型可选值默认值
modelValue / v-model显示 loadingboolean--
text指定通知中所使用的语言。string-'loading...'
background遮罩背景色string-'rgba(0, 0, 0, 0.38)'
customClass自定义组件根元素 class string--
clickOnClick点击后关闭 loadingboolean-false
zIndex组件层级number-100
mode组件渲染模式：insert插入到 slot 中，wrap创建一个 div 包裹住 slot,默认是insertstringinsert / wrap1

Loading 插槽 ​

插槽名说明
icon图标位插槽；自定义 loading icon-
text文字位插槽；自定义 loading 文本-
default默认插槽；要被 loading 遮罩遮住的目标，省略时会插到 body 下全屏显示-