Easy UI

Appearance

Watermark 水印 ​

为页面容器叠加文字或图片水印，防止内容被随意转载。水印以平铺的背景图片渲染，不会阻塞任何用户交互。

引入 ​

html
<script
  type="module"
  src="./node_modules/easy-component-ui/dist/components/ea-watermark.js"
></script>
html
import 'easy-component-ui/ea-watermark'

基础用法 ​

通过 ea-watermark 包裹需要叠加水印的内容，默认会在内容上平铺 "watermark" 文字水印。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. The watermark is rendered on top of the content as a repeated background image, without blocking any user interaction.
查看代码
html
<ea-watermark>
  <div class="watermark-box">
    <div class="inner">...</div>
  </div>
</ea-watermark>

自定义内容 ​

通过 content 属性设置水印文字。content 为纯 JavaScript 属性，也支持字符串数组渲染多行水印。

Text watermark with custom content.
Multi-line watermark rendered via array.
查看代码
html
<ea-watermark content="Confidential">
  <div class="watermark-box">...</div>
</ea-watermark>
<ea-watermark id="multiLineWatermark">
  <div class="watermark-box">...</div>
</ea-watermark>
js
const multiLine = document.querySelector("#multiLineWatermark");
multiLine.content = "Top Secret\nInternal Use";

:::

多行文本水印 ​

设置足够的 width / height 与 gap，并给 content 传入字符串数组，即可渲染多行水印文本。

Multi-line watermark rendered via an array of strings.
查看代码
html
<ea-watermark id="multiLineWatermark2" width="300" height="180">
  <div class="watermark-box">...</div>
</ea-watermark>
js
const multiLine = document.querySelector("#multiLineWatermark2");
multiLine.gap = [300, 180];
multiLine.content = "Top Secret\nConfidential\nInternal Use";
multiLine.font = { fontSize: 20 };

:::

旋转角度 ​

通过 rotate 属性设置水印的旋转角度，单位 °。

Watermark rotated by -30 degrees.
Watermark without rotation.
查看代码
html
<ea-watermark rotate="-30">
  <div class="watermark-box">...</div>
</ea-watermark>
<ea-watermark rotate="0">
  <div class="watermark-box">...</div>
</ea-watermark>

自定义字体与间距 ​

通过 JS 属性 font 设置水印文字样式，通过 gap 设置水印之间的间距。

Custom font color, size and gap set via JS property.
查看代码
html
<ea-watermark id="fontWatermark">
  <div class="watermark-box">...</div>
</ea-watermark>
js
const fontWatermark = document.querySelector("#fontWatermark");
fontWatermark.width = 240;
fontWatermark.height = 120;
fontWatermark.gap = [240, 120];
fontWatermark.font = {
  color: "rgba(0, 100, 200, 0.25)",
  fontSize: 20,
  fontWeight: "bold",
};

:::

图片水印 ​

通过 image 属性设置水印图片，建议使用 2x 或 3x 图像。同时可通过 width / height 控制水印平铺单元尺寸。

Image watermark using a custom source image.
查看代码
html
<ea-watermark image="/logo.png" width="256" height="128">
  <div class="watermark-box">...</div>
</ea-watermark>

Watermark API ​

Watermark Attributes ​

参数说明类型可选值默认值
width水印的宽度number—120
height水印的高度number—64
rotate水印的旋转角度，单位 °number—-22
z-index水印元素的 z-index 值number—9
image水印图片，建议使用 2x 或 3x 图像string—""
content水印文本内容string—"watermark"

Watermark Properties ​

Properties 为纯 JavaScript 属性，不映射到 HTML attribute，需通过 JS 访问。

属性说明类型默认值
content水印文本内容，支持字符串数组渲染多行string | string[]"watermark"
font水印文字样式，字段见下表Font见下表
gap水印之间的间距number[][100, 100]
offset水印从容器左上角的偏移number[] | nullnull（默认 gap 的一半）

Font ​

名称详情类型默认值
color字体颜色stringrgba(0, 0, 0, 0.15)
fontSize字体大小number | string16
fontWeight字重number | stringnormal
fontFamily字体stringsans-serif
fontGap字体间隙number3
fontStyle字体样式stringnormal
textAlign文本对齐stringcenter
textBaseline文本基线stringhanging

Watermark CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container容器元素
content水印内容元素

Watermark Slots ​

名称说明
default默认插槽，需要叠加水印的内容

Watermark CSS Custom Properties ​

属性说明默认值
--ea-watermark-border-radius组件边框圆角var(--border-radius-sm)
--ea-watermark-font-size组件字体大小var(--font-size-md)
--ea-watermark-transition组件过渡动画var(--transition-fast)
--ea-watermark-text文字颜色var(--grey-900)
--ea-watermark-bg背景颜色var(--color-white)
--ea-watermark-border-color边框颜色var(--grey-300)