更新记录

1.0.0（2026-09-18） 下载此版本

1.0 发布

平台兼容性

uni-app x(5.25)

其他

uni-glass-modal

基于 uni-app x glass-effect-view 实现的 iOS 液态玻璃弹框示例，提供普通提示、文本输入、明暗主题适配和接近 uni.showModal 的回调结果。

仅适用于 App iOS，系统版本需为 iOS 26 或更高。iOS 26 以下降级为系统毛玻璃效果。本示例使用 uni-app x Vapor 模式。

功能

• 使用原生 glass-effect-view 呈现液态玻璃效果
• 支持有标题、无标题、单按钮和双按钮布局
• 支持 editable 文本输入及键盘避让
• 支持自定义按钮文案和颜色
• 跟随应用主题及系统明暗主题
• 默认按钮文案适配简体中文、繁体中文、英语、西班牙语和法语
• 提供 cancel、confirm 和 complete 事件

运行示例

1. 使用 5.25+ HBuilderX 导入示例项目。
2. 选择 iOS 26 或更高版本的真机或模拟器。
3. 运行到 App iOS。

首页包含普通弹框、无标题、长标题、自定义按钮、可编辑内容等示例。

接入组件

将插件目录放入 uni-app x 项目的 uni_modules 目录：

uni_modules/uni-glass-modal
└── components
    └── uni-glass-modal
        ├── uni-glass-modal.uvue
        ├── types.uts
        └── useTheme.uts

组件通过 visible 受控显示。调用方需要在 complete 事件中将 visible 设置为 false。

<template>
    <button @click="openModal">显示弹框</button>

    <uni-glass-modal
        :visible="modalVisible"
        title="提示"
        content="是否继续执行该操作？"
        :show-cancel="true"
        @cancel="onCancel"
        @confirm="onConfirm"
        @complete="onComplete"
    />
</template>

<script setup>
    import type { GlassModalResult } from '@/uni_modules/uni-glass-modal/components/uni-glass-modal/types'

    const modalVisible = ref(false)

    function openModal() {
        modalVisible.value = true
    }

    function onCancel(result : GlassModalResult) {
        console.log('cancel', result)
    }

    function onConfirm(result : GlassModalResult) {
        console.log('confirm', result)
    }

    function onComplete(result : GlassModalResult) {
        console.log('complete', result)
        modalVisible.value = false
    }
</script>

可编辑弹框

editable 为 true 时，content 是输入框的初始值；用户点击确认按钮后，可以从结果的 content 字段取得最终输入内容。

<uni-glass-modal
    :visible="modalVisible"
    title="添加备注"
    content=""
    :editable="true"
    placeholder-text="请输入备注"
    @confirm="onConfirm"
    @complete="onComplete"
/>

Props

Events

事件触发顺序为：

cancel 或 confirm -> complete

GlassModalResult

语言适配

当 cancelText 或 confirmText 为 null 时，组件会在每次打开前读取 uni.getAppBaseInfo().appLanguage，并选择对应的默认按钮文案。

其他语言会回退到简体中文。修改系统中的应用语言后，重新打开弹框即可验证默认按钮文案。

主题适配

组件读取 appTheme 和 osTheme：

• appTheme 为 light 或 dark 时使用指定主题。
• appTheme 为 auto 时跟随系统主题。
• 运行期间主题变化会同步更新面板、正文、输入框、分割线和按钮颜色。

注意事项

• 组件不会在点击遮罩时关闭。
• visible 是受控属性，组件不会直接修改调用方状态；调用方应在结果事件或 complete 中隐藏弹框。