LoadingPage 全屏加载页

全端高阶全屏加载页组件，支持 自定义品牌 Logo 图片与 GIF、7 大量子动感形态、纯净透屏（无中间白卡片）/ 悬浮冰晶岛双布局、毛玻璃高斯模糊、全局 JS 零 import 调用与 ref 实例 API 调用。

---

代码示例

1. 自定义品牌 Logo 图片 (Custom Logo Image)

通过传入 image 属性，可以直接使用项目或团队专属的品牌 Logo 图片，并可配合 image-animation 配置 Logo 律动动画（pulse 呼吸、spin 旋转、bounce 弹跳、float 漂浮）。

<template>
  <view>
    <mu-button type="primary" @click="showLogo = true">自定义 Logo 呼吸脉冲</mu-button>

    <!-- 自定义 Logo 图片加载页 -->
    <mu-loading-page
      v-model:show="showLogo"
      image="https://your-domain.com/logo.png"
      image-animation="pulse"
      text="Muzhiyu UI 正在加载..."
      sub-text="正在为您同步云端缓存"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showLogo = ref(false)
</script>

---

2. 自定义图片/GIF 动画 (Custom Image Animation)

设置 type="custom" 并传入 image，可配置图片的个性化动画风格：

• pulse：呼吸放大缩小
• spin：360° 旋转
• bounce：上下弹跳
• float：轻盈浮动
• none：静止展示

<template>
  <!-- 图片弹跳动画 -->
  <mu-loading-page
    v-model:show="showCustom"
    type="custom"
    image="/static/logo.png"
    image-animation="bounce"
    text="图片弹跳加载中..."
  />
</template>

---

3. 7 种加载动感形态 (7 Types)

通过 type 属性可选择 7 种动感记载动画：

• logo：Logo 呼吸脉冲波
• bento：Bento 冰晶方块连波
• orbit：Orbit 双轨流光环
• wave：Wave 5柱声波律动
• cube：Cube 3D 翻转方块
• spinner / ring：经典轻量微旋
• custom：自定义图片/插槽

<template>
  <mu-loading-page v-model:show="show" type="orbit" text="双轨流光加载中..." />
</template>

---

4. 全局命名空间零 Import 调用 (Global JS Call)

在 request.js 响应拦截器或全局 JS 脚本中直接唤醒：

// 1. 唤醒自定义 Logo 全屏加载
uni.$emit('mu-loading-page-show', {
  image: 'https://your-domain.com/logo.png',
  text: '正在提交订单...',
  type: 'logo'
})

// 2. 数据处理完毕，隐藏加载页
uni.$emit('mu-loading-page-hide')

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制加载页显隐	Boolean	true | false	false
layout	布局风格	String	pure (默认纯净透屏，无中间白卡片) | card (带白底悬浮卡片)	'pure'
type	加载形态	String	logo | bento | orbit | wave | cube | spinner | ring | custom	'logo'
image	自定义品牌 Logo / GIF 图片路径	String	-	''
imageSize	图片尺寸大小 (px)	Number | String	-	80
imageMode	图片裁剪填充模式	String	'aspectFit' | 'scaleToFill' 等	'aspectFit'
imageAnimation	Logo 图片律动动画	String	'pulse' | 'spin' | 'bounce' | 'float' | 'none'	'pulse'
icon	自定义加载矢量图标名称	String	-	''
size	加载图标/动画容器尺寸 (px)	Number | String	-	48
text	核心提示主文案	String	-	'页面加载中...'
subText	辅助子文案	String	-	''
color	主主题色彩（留空在 pure 模式下自动适应高光纯白）	String	-	''
textColor	主提示文案颜色	String	-	''
bgColor	遮罩背景颜色	String	-	'rgba(15, 23, 42, 0.55)'
blur	是否开启高斯毛玻璃效果	Boolean	true | false	true
zIndex	层级 z-index	Number | String	-	99999
clickClose	点击背景遮罩是否允许收起	Boolean	true | false	false

---

插槽说明 (Slots)

插槽名	说明
image	自定义顶部 Logo/动画插槽
default	底部自定义描述与取消按钮插槽

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
close	点击遮罩关闭或加载完成收起时触发	-

---

实例方法 (Expose Methods)

获取组件 ref 实例后可调用：

方法名	说明	参数
open(options) / show	编程式唤醒加载页	options: Object (支持传入 { image, text, type })
close() / hide	关闭收起加载页	-