el-watermark
是 Element Plus
框架中的水印组件,用于在页面或特定元素上添加水印,以增加安全性或美观性。
el-watermark
属性详解
-
content:
- 类型:
String
- 用途: 水印的内容。
- 默认值:
—
- 类型:
-
font-size:
- 类型:
Number
- 用途: 水印字体大小。
- 默认值:
16
- 类型:
-
font-color:
- 类型:
String
- 用途: 水印字体颜色。
- 默认值:
rgba(0, 0, 0, 0.15)
- 类型:
-
width:
- 类型:
Number
- 用途: 水印的宽度。
- 默认值:
150
- 类型:
-
height:
- 类型:
Number
- 用途: 水印的高度。
- 默认值:
150
- 类型:
-
rotate:
- 类型:
Number
- 用途: 水印的旋转角度。
- 默认值:
-20
- 类型:
-
z-index:
- 类型:
Number
- 用途: 水印的 z-index。
- 默认值:
999
- 类型:
-
gap-x:
- 类型:
Number
- 用途: 水印在 x 轴上的间距。
- 默认值:
150
- 类型:
-
gap-y:
- 类型:
Number
- 用途: 水印在 y 轴上的间距。
- 默认值:
150
- 类型:
-
offset-x:
- 类型:
Number
- 用途: 水印在 x 轴上的偏移量。
- 默认值:
0
- 类型:
-
offset-y:
- 类型:
Number
- 用途: 水印在 y 轴上的偏移量。
- 默认值:
0
- 类型:
-
repeat:
- 类型:
String
- 用途: 水印的重复方式,可选值为
repeat
,repeat-x
,repeat-y
,no-repeat
。 - 默认值:
repeat
- 类型:
el-watermark
插槽详解
-
default:
- 插槽名称:
default
- 用途: 自定义水印的内容。
- 插槽名称:
完整示例代码
<template>
<div>
<h2>Watermark 示例</h2>
<!-- 基本用法 -->
<el-watermark content="基本水印"></el-watermark>
<!-- 自定义字体大小和颜色 -->
<el-watermark content="自定义字体大小和颜色" font-size="20" font-color="rgba(0, 0, 0, 0.3)"></el-watermark>
<!-- 自定义宽度和高度 -->
<el-watermark content="自定义宽度和高度" width="200" height="100"></el-watermark>
<!-- 自定义旋转角度 -->
<el-watermark content="自定义旋转角度" rotate="-30"></el-watermark>
<!-- 自定义 z-index -->
<el-watermark content="自定义 z-index" z-index="1000"></el-watermark>
<!-- 自定义间距 -->
<el-watermark content="自定义间距" gap-x="200" gap-y="100"></el-watermark>
<!-- 自定义偏移量 -->
<el-watermark content="自定义偏移量" offset-x="50" offset-y="50"></el-watermark>
<!-- 自定义重复方式 -->
<el-watermark content="自定义重复方式" repeat="repeat-x"></el-watermark>
<!-- 自定义内容 -->
<el-watermark>
<template #default>
<span style="color: blue; font-weight: bold;">自定义内容</span>
</template>
</el-watermark>
</div>
</template>
代码解释
-
基本用法:
- 使用
el-watermark
组件并设置content
属性来指定水印内容。 -
<el-watermark content="基本水印"></el-watermark>
- 使用
-
自定义字体大小和颜色:
- 使用
font-size
和font-color
属性自定义水印的字体大小和颜色。 -
<el-watermark content="自定义字体大小和颜色" font-size="20" font-color="rgba(0, 0, 0, 0.3)"></el-watermark>
- 使用
-
自定义宽度和高度:
- 使用
width
和height
属性自定义水印的宽度和高度。 -
<el-watermark content="自定义宽度和高度" width="200" height="100"></el-watermark>
- 使用
-
自定义旋转角度:
- 使用
rotate
属性自定义水印的旋转角度。 -
<el-watermark content="自定义旋转角度" rotate="-30"></el-watermark>
- 使用
-
自定义 z-index:
- 使用
z-index
属性自定义水印的 z-index。 -
<el-watermark content="自定义 z-index" z-index="1000"></el-watermark>
- 使用
-
自定义间距:
- 使用
gap-x
和gap-y
属性自定义水印在 x 轴和 y 轴上的间距。 -
<el-watermark content="自定义间距" gap-x="200" gap-y="100"></el-watermark>
- 使用
-
自定义偏移量:
- 使用
offset-x
和offset-y
属性自定义水印在 x 轴和 y 轴上的偏移量。 -
<el-watermark content="自定义偏移量" offset-x="50" offset-y="50"></el-watermark>
- 使用
-
自定义重复方式:
- 使用
repeat
属性自定义水印的重复方式。 -
<el-watermark content="自定义重复方式" repeat="repeat-x"></el-watermark>
- 使用
-
自定义内容:
- 使用默认插槽自定义水印的内容。
-
<el-watermark> <template #default> <span style="color: blue; font-weight: bold;">自定义内容</span> </template> </el-watermark>