更新记录

1.2.4（2026-09-01）

• 修复uniapp x 兼容问题
• Demo 图片迁移到插件 static 目录并使用模块绝对路径，保证 Android 打包后可访问。

V1.2.0（2026-08-03）

新增

• 色调能力：tint（dark / light / clear）、tintColor、intensity（soft / medium / strong）。
• 光学参数：refractiveIndex / glassThickness / bezelWidth / specularOpacity / specularSaturation / specularAngle / quality。
• Q 弹交互：scalable / scaleMultiplier / scaleDuration / easingType="spring"，并支持 springStiffness / springDamping。
• 导航栏组件：lf-glass-navbar（Vue）、lf-glass-navbar-x（uni-app x）、lf-glass-navbar.nvue；支持图片 icon。
• 平台适配：
  • H5 / App-vue：lf-glass.vue（完整光学 + 弹簧）
  • nvue：lf-glass.nvue（拟态降级，同 API）
  • uni-app x：lf-glass-x.uvue（渐进增强）
• 事件：ready / error。

修复

• 修复 edgePreset 写死背景色导致 opacity 失效的问题；edgePreset 只调整边框与高光权重。
• 修复导航栏均分场景下 thumb 定位偏移；改为测量真实 item 宽度定位。

优化

• tint / 边光 / 阴影改为 CSS 变量驱动，观感更接近透明液态玻璃。
• App 端同步尝试 backdrop-filter / -webkit-backdrop-filter。
• quality 性能档：1 关折射与 specular，2 默认，3 高品质；导航栏默认 quality=1。
• 导航栏 thumb 改为轻量高光层，避免嵌套第二套完整玻璃。
• 弹簧参数可由 scaleDuration 自动推导。
• H5 优先 ResizeObserver 更新滤镜尺寸。
• Demo 增加本地渐变兜底，避免外网图失败时空白。

兼容说明

• 全平台保持统一 props / 事件口径。
• 光学折射与 SVG 滤镜以 H5 最完整；App-vue 保留 backdrop-filter + 高光层；nvue / uni-app x App 为稳定拟态降级，不保证与 H5 像素级一致。

V1.0.1（2026-04-28）

• Vue3 script setup 改为 Options API，兼容 uni-app Vue2 / Vue3 项目。
• 新增对 App-Vue Android / iOS / 鸿蒙端的降级兼容支持。
• H5 端保留背景模糊、SVG 折射、色散和高光增强效果。
• App 端自动降级为深色玻璃底、左右高光、边框、阴影和按压反馈效果。
• 优化小标签场景显示效果，增强左右白色高光和边缘轮廓。
• 优化深色玻璃底透明度、背景压暗、阴影和面高光效果，使视觉更接近液态玻璃质感。
• 优化 App 端文字垂直居中兼容方式，推荐使用 text 标签并设置固定 line-height。
• 新增支持 slot 内容。

平台兼容性

uni-app(5.07)

uni-app x(5.07)

LF Glass 液态玻璃

插件地址：https://ext.dcloud.net.cn/plugin?id=27813

翎赋 lf-glass：透明液态玻璃组件 + 玻璃导航栏。
统一 API，按平台渐进增强：H5 最完整，App-vue 次之，uni-app x / nvue 稳定拟态降级。

当前版本：1.2.2

组件选择

平台兼容

图例：√ 已验证；u 未充分验证；- 本版不支持。视觉按端渐进增强，不是像素级同渲染。

特性

• 色调：tint / tintColor / intensity
• 光学：折射率、厚度、bezel、高光角度/饱和度、色散
• Q 弹：弹簧缩放（easingType="spring"），可由 scaleDuration 推导手感
• 性能档：quality 1/2/3，列表场景建议 1
• 导航栏：轻量 thumb + 真实宽度定位，支持文字/图片 icon
• 事件：ready / error / click
• 无第三方依赖

安装

将插件放入：

uni_modules/lf-glass

开启 easycom / uni_modules 自动扫描后可直接使用组件标签。也可手动引入：

import LfGlass from '@/uni_modules/lf-glass/components/lf-glass/lf-glass.vue'
import LfGlassNavbar from '@/uni_modules/lf-glass/components/lf-glass-navbar/lf-glass-navbar.vue'

快速上手

<lf-glass
  size="card"
  tint="clear"
  intensity="medium"
  :radius="24"
  :quality="2"
  :refractive-index="1.35"
  :glass-thickness="160"
  :bezel-width="20"
  :specular-angle="60"
  :scale-multiplier="1.12"
  :scale-duration="380"
  easing-type="spring"
>
  <view>液态玻璃</view>
</lf-glass>

导航栏

<lf-glass-navbar
  v-model="current"
  :items="items"
  :height="60"
  :quality="1"
  tint="dark"
/>

const current = ref(0)
const items = [
  { id: 'home', label: '首页' },
  { id: 'list', label: '发现', icon: '/static/tab/list.png' },
  { id: 'mine', label: '我的', icon: '我' }
]

icon 支持：

• 图片：http(s)://、/ 本地路径、data:image、常见图片后缀
• 其他字符串：按文本图标渲染

uni-app x

<lf-glass-x tint="dark" intensity="medium" :radius="20" :quality="1">
  <text>Glass X</text>
</lf-glass-x>

lf-glass Props

基础

光学

quality 说明：

Q 弹

lf-glass-navbar Props

Events

Demo

在 pages.json 顶层 pages 添加：

{
  "path": "uni_modules/lf-glass/pages/demo/demo",
  "style": {
    "navigationBarTitleText": "LF Glass",
    "navigationBarBackgroundColor": "#0b1218",
    "navigationBarTextStyle": "white"
  }
}

跳转：

uni.navigateTo({
  url: '/uni_modules/lf-glass/pages/demo/demo'
})

注意事项

1. 玻璃需要背后有图片、渐变或复杂背景，纯色底效果弱。
2. H5 光学最强；App-vue 取决于 WebView 的 backdrop-filter。
3. nvue / uni-app x App 为拟态降级，参数会映射到透明度、边框、高光与缩放，不会出现 H5 级折射。
4. 列表、Tab、导航栏请优先 quality=1，避免多实例 SVG 滤镜拖慢页面。
5. 导航栏窄屏建议 items ≤ 5；thumb 会按实测宽度定位。
6. edgePreset 只调边框/高光权重，不会覆盖你传入的 opacity / tint。

问题反馈

插件市场：https://ext.dcloud.net.cn/plugin?id=27813

• ---

• 邮箱：lingfugroup@gmail.com