加载

加载组件。

基础使用

<template>
	<pure-loading></pure-loading>
</template>

自定义图标

通过 iconName 属性设置加载图标。

<template>
	<pure-loading iconName="__spin"></pure-loading>
</template>

提示文本

通过 text 属性设置提示文本。

<template>
	<pure-loading text="加载中..."></pure-loading>
</template>

纵向布局

将 vertical 属性设置为 true 开启纵向布局。

<template>
	<pure-loading
		vertical
		text="加载中"
	></pure-loading>
</template>

属性

名称	类型	默认值	说明
text	String		加载文本
iconName	String		加载图标
iconOptions	Object	{}	加载图标配置 参考
speed	Number	1000	转一圈的用时，毫秒
vertical	Boolean	false	是否纵向布局

插槽

名称	参数	说明
#default		默认，提示文本

样式变量

名称	说明
--pure-loading-display	显示方式
--pure-loading-flex-direction	布局方向
--pure-loading-gap	内容之间的间距
--pure-loading-animation-duration	动画时长
--pure-loading-animation-timing-function	动画函数
--pure-loading-icon-font-size	加载图标字体大小
--pure-loading-icon-font-weight	加载图标字体粗细
--pure-loading-icon-color	加载图标字体颜色
--pure-loading-text-font-size	加载文本字体大小
--pure-loading-text-font-weight	加载文本字体粗细
--pure-loading-text-color	加载文本字体颜色