LoadingPage 加载页

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

基本使用

<m-loading-page />

显示或隐藏

loading可以指定是否显示加载页

<m-loading-page :loading="true" />

文字内容

loading-text可以指定提示内容

<m-loading-page loading-text="loading..." />

动画模式

loading-mode可以指定加载动画的模式, 默认为circle

<m-loading-page loading-mode="spinner" />

动画图片

image可以指定文字上方用于替换loading动画的图片

<m-loading-page image="/static/logo.png" />

文字颜色

color可以指定文字颜色

<m-loading-page color="red" />

文字大小

font-size可以指定文字大小

<m-loading-page font-size="24" />

图标大小

icon-size可以指定图标大小，不指定时图标大小动画模式为['spinner', 'semicircle', 'circle']为28，default为10，否则为16。

<m-loading-page icon-size="24" />

背景颜色

bg-color可指定背景色

<m-loading-page bg-color="red" />

图标颜色

loading-color可以指定加载中图标的颜色

<m-loading-page loading-color="red" />

图标浅色

loading-inactive-color可以指定加载中图标的浅色，注意只有动画模式是：bicircle或circle才生效。

<m-loading-page loading-mode="bicircle" loading-inactive-color="red" />

API

Props

参数	说明	类型	默认值	可选值
loading	是否显示	Boolean	false	true
loadingText	提示内容	String | Number	正在加载	-
image	文字上方用于替换loading动画的图片	String	-	-
loadingMode	加载动画的模式	String	circle	查看加载动画
iconSize	图标大小	String | Number	看上方文档说明	-
bgColor	背景颜色	String	#ffffff	-
color	文字颜色	String	color['m-info']	-
fontSize	文字大小	String | Number	16	-
loadingColor	加载中图标的颜色	String	color['m-info']	-
loadingInactiveColor	加载动画浅色颜色	String	-	-