Skip to content

Watermark 水印

防截图、防盗用水印组件,支持全屏视口覆盖与局部指定容器定位,提供倾斜角度、透明度、间距及字号自定义。


代码示例

1. 基础全屏水印 (Fullpage Watermark)

vue
<template>
  <mu-watermark text="Muzhiyu UI 绝密机密" :full-page="true" />
</template>

2. 局部容器水印 (Container Watermark)

设置 :full-page="false",置于 position: relative 的卡片内部即可仅对指定区块加水印。

vue
<template>
  <view class="card">
    <mu-watermark text="机密合同" :full-page="false" :opacity="0.18" />
    <view class="content">卡片机密内容...</view>
  </view>
</template>

API 属性说明 (Props)

参数名说明类型可选值默认值
text水印文字内容String-'Muzhiyu UI'
fullPage是否覆盖全屏窗口视口Booleantrue | falsetrue
rotate文字倾斜旋转角度 (deg)Number--22
opacity水印透明度 (0 ~ 1)Number-0.12
fontSize文字字号 (rpx)Number-28
gapX水平间距 (rpx)Number-48
gapY垂直间距 (rpx)Number-48
color水印文字颜色String-'currentColor' (自适应暗黑模式)
count水印平铺重复数量Number-60
zIndex图层 z-indexNumber | String-99

基于 MIT 协议开源发行

H5 模拟器 (watermark)☀️🔄