el-watermark详解

2 阅读3分钟

el-watermarkElement Plus 框架中的水印组件,用于在页面或特定元素上添加水印,以增加安全性或美观性。

el-watermark 属性详解

  1. content:

    • 类型: String
    • 用途: 水印的内容。
    • 默认值: 
  2. font-size:

    • 类型: Number
    • 用途: 水印字体大小。
    • 默认值: 16
  3. font-color:

    • 类型: String
    • 用途: 水印字体颜色。
    • 默认值: rgba(0, 0, 0, 0.15)
  4. width:

    • 类型: Number
    • 用途: 水印的宽度。
    • 默认值: 150
  5. height:

    • 类型: Number
    • 用途: 水印的高度。
    • 默认值: 150
  6. rotate:

    • 类型: Number
    • 用途: 水印的旋转角度。
    • 默认值: -20
  7. z-index:

    • 类型: Number
    • 用途: 水印的 z-index。
    • 默认值: 999
  8. gap-x:

    • 类型: Number
    • 用途: 水印在 x 轴上的间距。
    • 默认值: 150
  9. gap-y:

    • 类型: Number
    • 用途: 水印在 y 轴上的间距。
    • 默认值: 150
  10. offset-x:

    • 类型: Number
    • 用途: 水印在 x 轴上的偏移量。
    • 默认值: 0
  11. offset-y:

    • 类型: Number
    • 用途: 水印在 y 轴上的偏移量。
    • 默认值: 0
  12. repeat:

    • 类型: String
    • 用途: 水印的重复方式,可选值为 repeatrepeat-xrepeat-yno-repeat
    • 默认值: repeat

el-watermark 插槽详解

  1. 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>

代码解释

  1. 基本用法:

    • 使用 el-watermark 组件并设置 content 属性来指定水印内容。
    • <el-watermark content="基本水印"></el-watermark>
      
  2. 自定义字体大小和颜色:

    • 使用 font-size 和 font-color 属性自定义水印的字体大小和颜色。
    • <el-watermark content="自定义字体大小和颜色" font-size="20" font-color="rgba(0, 0, 0, 0.3)"></el-watermark>
      
  3. 自定义宽度和高度:

    • 使用 width 和 height 属性自定义水印的宽度和高度。
    • <el-watermark content="自定义宽度和高度" width="200" height="100"></el-watermark>
      
  4. 自定义旋转角度:

    • 使用 rotate 属性自定义水印的旋转角度。
    • <el-watermark content="自定义旋转角度" rotate="-30"></el-watermark>
      
  5. 自定义 z-index:

    • 使用 z-index 属性自定义水印的 z-index。
    • <el-watermark content="自定义 z-index" z-index="1000"></el-watermark>
      
  6. 自定义间距:

    • 使用 gap-x 和 gap-y 属性自定义水印在 x 轴和 y 轴上的间距。
    • <el-watermark content="自定义间距" gap-x="200" gap-y="100"></el-watermark>
      
  7. 自定义偏移量:

    • 使用 offset-x 和 offset-y 属性自定义水印在 x 轴和 y 轴上的偏移量。
    • <el-watermark content="自定义偏移量" offset-x="50" offset-y="50"></el-watermark>
      
  8. 自定义重复方式:

    • 使用 repeat 属性自定义水印的重复方式。
    • <el-watermark content="自定义重复方式" repeat="repeat-x"></el-watermark>
      
  9. 自定义内容:

    • 使用默认插槽自定义水印的内容。
    • <el-watermark>
        <template #default>
          <span style="color: blue; font-weight: bold;">自定义内容</span>
        </template>
      </el-watermark>