更新记录

1.0.1（2026-06-24） 下载此版本

  • 简化传参 现在支持毛玻璃效果和高透光效果

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

  • 仿玻璃效果组件

平台兼容性

uni-app(5.0)

Vue2 Vue2插件版本 Vue3 Vue3插件版本 Chrome Chrome插件版本 Safari Safari插件版本 app-vue app-nvue Android Android插件版本 iOS 鸿蒙
√ 1.0.0 √ 1.0.0 √ 1.0.0 √ 1.0.0 - - √ 1.0.0 - -
微信小程序 微信小程序插件版本 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ 1.0.0 - - - - - - - - - - -

zv-glass

液态玻璃容器组件，支持 毛玻璃 与 高透光 两种模式，模拟透光、折射、反射与边框高光。外观由 width、height、radius 自行控制。

基础用法

<!-- 毛玻璃卡片 -->
<zv-glass mode="frosted" :width="650" :radius="24">
  <view class="white">液态玻璃效果</view>
</zv-glass>

<!-- 高透光胶囊按钮 -->
<zv-glass mode="clear" :width="320" :height="88" :radius="44">
  <view class="white">滑动接单</view>
</zv-glass>

Props

属性 类型 默认值 说明
mode String frosted frosted 毛玻璃 / clear 高透光
width / height Number/String 100% / auto 宽高，决定容器形状
padding Number/String 24 内边距
radius Number/String 24 圆角，数字默认 rpx
blur Number/String - 覆盖默认模糊强度（px）
saturate Number/String - 背景饱和度
enableBlur Boolean true 是否启用 backdrop-filter
borderWidth Number/String 1 边框高光宽度（px）
hover Boolean true 点击缩放反馈
hoverScale Number/String 0.98 按压缩放比
showGlow / showRefract / showSpecular / showDepth Boolean true 各装饰层开关

说明

  • H5 / App 支持 backdrop-filter 时呈现真实毛玻璃；微信小程序会自动降级为渐变 + 内阴影模拟。
  • mode="frosted"：强模糊、较低透光，适合面板、卡片。
  • mode="clear"：弱模糊、高透光、更强边框高光，适合按钮、小控件。
  • 胶囊形：设固定 height，radius 约为高度的一半；正圆形：width 与 height 相等，radius="50%" 或等于宽度一半。

实际效果可进入小程序查看

示例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。