更新记录

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

仿玻璃效果容器组件。组件只生成玻璃质感，内部内容自定义。

兼容性

  • 支持 uni-app Vue2 / Vue3。
  • 支持 App、H5、微信小程序。
  • H5 / App 支持 backdrop-filter 时会显示真实背景模糊；微信小程序不支持时，会使用渐变、高光、暗角、边框、阴影模拟玻璃效果。

基础用法

<zv-glass>
    <image src="/static/icon.png" class="icon"></image>
</zv-glass>

自定义圆形按钮

<zv-glass
    :width="100"
    :height="100"
    :radius="50"
    bg-color="rgba(255,255,255,0.18)"
    border="1px solid rgba(255,255,255,0.35)"
    shadow="0 18rpx 42rpx rgba(0,0,0,0.28)"
    :blur="18"
    :hover="true"
>
    <view class="btn-content">
        <text class="icon">⌗</text>
    </view>
</zv-glass>

常用属性

属性名 类型 默认值 说明
width Number, String 100 传数字时默认单位rpx，传字符串时保留原单位。
height Number, String 100 传数字时默认单位rpx，传字符串时保留原单位。
padding Number, String 0 内容内边距，默认0
radius String 50 圆角大小
bgColor String rgba(255, 255, 255, 0.18) 玻璃底色，建议使用透明色
blur Number, String 18 背景模糊强度
saturate Number, String 160 背景饱和度；配合blur使用，数字表示百分比
border String 1px solid rgba(255,255,255,0.35) 玻璃边框；建议用浅色透明边框
shadow String 0 18rpx 42rpx rgba(0,0,0,0.28) 外阴影
innerShadow String inset 0 1px 2px rgba(255,255,255,0.55), inset 0 -18rpx 26rpx rgba(0,0,0,0.18) 内阴影
opacity Number, String 1 整体透明度
overflow String hidden 溢出控制
zIndex Number,String auto 层级
showHighlight Boolean true 是否显示顶部高光
highlightColor String rgba(255,255,255,0.62) 高光颜色
highlightWidth Number,String 70% 高光宽度；数字默认 rpx，字符串可传百分比
highlightHeight Number, String 38% 高光高度；数字默认 rpx，字符串可传百分比
highlightTop Number, String 8% 高光距离顶部的位置
highlightLeft Number, String 15% 高光距离左侧的位置
highlightBlur Number, String 12 高光自身模糊；数字默认 px
highlightOpacity Number, String 0.55 高光透明度
hover Boolean false 是否开启按压态
hoverScale Number, String 0.96 按压缩放比例
disabled Boolean false 是否禁用,禁用后不再触发click，并降低透明度
lightColor String rgba(255,255,255,0.42) 玻璃亮部颜色；用于生成外层渐变
middleColor String rgba(255,255,255,0.08) 玻璃中部颜色；用于生成外层渐变
darkColor String rgba(0,0,0,0.18) 玻璃暗部颜色；用于生成外层渐变
gradient String '' 定义外层渐变；一般不用传，传入后会覆盖 lightColor/middleColor/darkColor
showInner Boolean true 否显示内层光斑/暗角
innerLightColor String rgba(255,255,255,0.30) 内层光斑颜色
innerDarkColor String rgba(0,0,0,0.24) 内层暗角颜色
innerBg String '' 自定义内层背景；一般不用传，传入后会覆盖 innerLightColor/innerDarkColor

事件

  • click：点击玻璃容器时触发

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

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

暂无用户评论。