更新记录

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 内容。

V1.0.0（2026-04-28） 下载此版本

• 新增 LF Glass 液态玻璃组件。
• 支持 uni-app Vue3 项目。
• 支持 H5 背景模糊、折射、色散和高光效果。
• 支持 App-Vue 端自动降级显示。
• 支持深色玻璃底、左右高光边、顶部面高光。
• 支持 size="tag/card/panel" 尺寸预设。
• 支持 edge-preset="auto/light/dark" 背景适配预设。
• 支持圆角、模糊强度、透明度、折射强度、色散强度配置。
• 支持点击按压反馈和禁用状态。

平台兼容性

uni-app(5.07)

LF Glass 液态玻璃组件

适用于 uni-app Vue3 的轻量玻璃拟态组件。H5 端支持 backdrop-filter 背景模糊和 SVG 折射滤镜；App 端自动降级为稳定的半透明深色玻璃、高光、边框效果。

特性

• 支持 uni-app Vue3。
• 支持 H5 背景模糊、饱和度、轻微折射、边缘高光。
• App 端自动降级，不强依赖 SVG filter。
• 支持浅色 / 深色背景边缘预设。
• 支持 slot 内容。
• 支持点击按压反馈。
• 无第三方依赖。

安装

将插件目录放入项目：

uni_modules/lf-glass

组件路径：

uni_modules/lf-glass/components/lf-glass/lf-glass.vue

使用 uni_modules / easycom 时，页面中可以直接使用：

<lf-glass>
  <view>内容</view>
</lf-glass>

如果你的项目没有开启 easycom，可以手动引入：

<script setup>
import LfGlass from '@/uni_modules/lf-glass/components/lf-glass/lf-glass.vue';
</script>

基础用法

<template>
  <lf-glass
    class="id-glass"
    :radius="12"
    :blur="10"
    :opacity="0.34"
    :displacement-scale="8"
    :aberration-intensity="0.8"
    edge-preset="light"
  >
    <text class="id-glass__text">ID: T03984</text>
  </lf-glass>
</template>

<style lang="scss" scoped>
.id-glass {
  display: inline-flex;
  height: 24rpx;
  padding: 0 12rpx;
  box-sizing: border-box;
}

.id-glass :deep(.lf-glass__content) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.id-glass__text {
  display: block;
  height: 24rpx;
  line-height: 24rpx;
  font-size: 16rpx;
  color: #ffffff;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.45);
}
</style>

属性说明

事件

平台兼容说明

H5 端使用 backdrop-filter 和 SVG filter 实现增强效果，不同浏览器对滤镜支持存在差异。App 端默认保留半透明深色玻璃底、边缘高光和阴影，不依赖 SVG filter。

注意事项

• 玻璃效果需要组件背后有图片、色块或复杂背景，纯色背景下效果不明显。
• H5 若看不到模糊，请检查父级是否有纯色背景覆盖，或浏览器是否支持 backdrop-filter。
• 小程序端滤镜支持不稳定，本组件主要面向 H5 和 App Vue 页面。