更新记录

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

1.0.0

平台兼容性

uni-app(4.76)

其他

液态玻璃组件

适用于 uni-app Vue 3 的玻璃容器，支持背景模糊、高光、H5 背景位移折射和按压回弹，可用于悬浮导航、卡片、按钮等场景。支持自定义尺寸、圆角、透明度、色调及内容插槽，自带样式，无需 UnoCSS、自动导入插件或额外 UI 库。

本组件模拟液态玻璃视觉风格，不是 iOS 原生 Liquid Glass，不承诺与 Apple 系统材质完全一致。

平台兼容性

uni-app Vue 3 编译器 4.76 已完成验证，更早版本未验证。推荐使用 HBuilderX 4.71 或更新版本进行插件发布，以识别新版兼容性字段；发布工具版本不等同于已验证的运行兼容版本。

安装

导入后，插件目录为 uni_modules/czy712-liquidglass/。CLI 工程放在 src/uni_modules/czy712-liquidglass/。保持 easycom 默认扫描，可直接使用 czy712-liquidglass 标签。

玻璃卡片

<template>
  <view class="demo-background">
    <czy712-liquidglass :height="120" :radius="28" :blur="12" :opacity="0.16">
      <text>液态玻璃卡片</text>
    </czy712-liquidglass>
  </view>
</template>

<style scoped>
.demo-background {
  padding: 24px;
  color: white;
  background: linear-gradient(130deg, #11213d, #759cc7 48%, #152339 52%, #244967);
}
</style>

回弹按钮

<script setup>
function handleClick() {
  uni.showToast({ title: '已点击', icon: 'none' })
}
</script>

<template>
  <czy712-liquidglass
    :width="180"
    :height="180"
    radius="50%"
    interactive
    aria-label="体验玻璃球回弹"
    @click="handleClick"
  >
    <text>点击我</text>
  </czy712-liquidglass>
</template>

interactive=true 时，透明按钮层接收整个组件的交互。插槽中有按钮、导航项或输入框时，请保持 interactive=false，由内部控件处理交互，避免遮挡。

属性

事件与插槽

• click：交互模式激活时触发，无参数。
• 默认插槽：放置文字、图标或业务内容。
• H5 支持键盘 Enter、空格激活，并响应系统 prefers-reduced-motion 设置；小程序可由业务传入 reducedMotion。

使用建议

玻璃背后需要有图像或色彩变化才能看出效果。纯色背景会弱化模糊和折射；不支持背景模糊时仍保留半透明填充、高光和边框。

避免给祖先容器设置 opacity < 1、filter、backdrop-filter 或 mask 等可能改变背景采样范围的属性。需要调整玻璃透明度时使用组件 opacity 属性。

H5 位移贴图随组件尺寸和圆角变化更新，最大边 512 像素；卸载时释放 SVG、监听器、观察器和定时器。不使用逐帧页面截图。大面积模糊与大量重叠组件可能增加 GPU 开销，低性能设备可降低 blur 或将 refraction 设为 0。

配套示例工程包含悬浮导航、玻璃球、卡片与实时参数面板。使用 HBuilderX 打开示例运行至浏览器；微信预览需填写自己的测试 appid。示例不依赖外层业务工程。

隐私、广告和许可

插件及示例不申请额外系统权限，不采集、上传任何数据，不发起网络请求，不依赖服务器，不包含广告 SDK、弹窗广告或统计代码。示例背景为本地原创 SVG。

插件为免费源码组件。插件市场下载页的广告解锁由市场平台处理，与组件运行时广告无关。

代码及示例采用 MIT 许可证，详见 license.md。作者：czy712。问题反馈请使用插件市场评论或 DCloud IM。