加载弹窗

加载弹窗组件。

基础使用

通过 show 属性设置加载弹窗是否显示。

<template>
	<pure-loading-modal :show="show"></pure-loading-modal>
	<pure-button @onClick="show = true">显示加载弹窗</pure-button>
</template>

提示内容

通过 text 属性设置加载弹窗的提示内容。

<template>
	<pure-loading-modal
		:show="show"
		text="加载中..."
	></pure-loading-modal>
	<pure-button @onClick="show = true">显示加载弹窗</pure-button>
</template>

可关闭

• 通过 closeable 属性设置加载弹窗是否可关闭
• 通过 @onClose 事件监听加载弹窗关闭事件

<template>
	<pure-loading-modal
		:show="show"
		text="加载中..."
		closeable
		@onClose="show = false"
	></pure-loading-modal>
	<pure-button @onClick="show = true">显示加载弹窗</pure-button>
</template>

显示遮罩

通过 mask 属性设置加载弹窗是否显示遮罩。

<template>
	<pure-loading-modal
		:show="show"
		text="加载中..."
		mask
	></pure-loading-modal>
	<pure-button @onClick="show = true">显示加载弹窗</pure-button>
</template>

纵向布局

通过 vertical 属性设置加载弹窗是否纵向布局。

<template>
	<pure-loading-modal
		:show="show"
		text="加载中..."
		vertical
	></pure-loading-modal>
	<pure-button @onClick="show = true">显示加载弹窗</pure-button>
</template>

属性

名称	类型	默认值	说明
show	Boolean	false	显示状态
mask	Boolean	false	是否显示遮罩
loadingIconName	String	loading	加载图标名称
closeable	Boolean	false	是否可关闭
closeIconName	String	close	关闭图标名称
text	String		弹窗文本
vertical	Boolean	false	是否垂直居中

事件

名称	参数	说明
onClose		关闭事件

样式变量

名称	说明
--pure-loading-modal-color	文本颜色
--pure-loading-modal-z-index	层级
--pure-loading-modal-mask-background	遮罩背景
--pure-loading-modal-background	背景
--pure-loading-modal-padding	内边距
--pure-loading-modal-border-radius	圆角大小
--pure-loading-modal-gap	内容之间的间距
--pure-loading-modal-width	宽度
--pure-loading-modal-height	高度
--pure-loading-modal-max-width	最大宽度
--pure-loading-modal-content-gap	内容之间的间距
--pure-loading-modal-animation-duration	动画持续时间
--pure-loading-modal-animation-timing-function	动画时间函数
--pure-loading-modal-loading-font-size	加载图标字体大小
--pure-loading-modal-loading-color	加载图标颜色
--pure-loading-modal-loading-font-weight	加载图标字体粗细
--pure-loading-modal-text-font-size	文本字体大小
--pure-loading-modal-text-color	文本颜色
--pure-loading-modal-text-font-weight	文本字体粗细
--pure-loading-modal-close-position	关闭按钮定位方式
--pure-loading-modal-close-size	关闭按钮大小
--pure-loading-modal-close-right	关闭按钮位置
--pure-loading-modal-close-top	关闭按钮位置
--pure-loading-modal-close-transform	关闭按钮变换
--pure-loading-modal-close-color	关闭按钮颜色
--pure-loading-modal-close-background	关闭按钮背景
--pure-loading-modal-close-border-radius	关闭按钮圆角大小
--pure-loading-modal-close-font-size	关闭按钮字体大小