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 | 是否覆盖全屏窗口视口 | Boolean | true | false | true |
| 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-index | Number | String | - | 99 |