ElementPlus实用功能:文章快速添加文字+图片水印

1. 什么是水印

这里只作简单的使用介绍，且仅仅涉及前端，暂不做深入的原理探究；

水印是一种在图片、视频或文档中添加的透明标记，通常包含有关原始内容的信息，例如作者、版权信息或来源。水印可以帮助保护内容的版权，防止未经授权的使用或盗版。水印通常以文字、图像或logo的形式添加在内容的角落或中心位置，以确保不影响内容的可视性。比如：

---

2. 前端快速实现

下面的水印功能基于Element-Plus框架中的Watermark组件实现，在页面上添加文本或图片等水印信息，借助于具体的前后端分离博客项目案例分别介绍 文字水印 + 图片水印的使用方式；

2.1 文字水印

文字水印，就是在目标页面上以水印的方式显示自定义的文字信息；

先简单看一下案例页面，这是一个正在完善中的博客项目，两种水印的实现方式都在博客文章详情页面中进行展示，下面是没有添加水印之前的文章展示效果:

要实现文字水印也很简单，根据文档描述，我们只需要在要进行水印展示的页面元素之外包裹下面组件代码：

<el-watermark :font="font">
   这里存放文章内容 
</el-watermark>

比如在这个博客项目中的具体实现:

  <el-watermark :font="font">
    <div style="" />
    <el-skeleton :rows="5" animated  :loading="loading">
    <div class="post-html" v-html="articles.content" />

    </el-skeleton>
</el-watermark>

这一步完成之后，基本的效果就出来了：

可以看到，水印默认显示的就是element-plus的文字logo，那么如何自定义显示我们自己想要的文字内容呢？考虑下面的代码,只需要在前面代码的基础上绑定一个content熟悉进行指定即可，内容是一个数组；

:content="['八尺妖剑','https://www.ilikexff.cn']"

在案例中的体现：

  <el-watermark :font="font" :content="['八尺妖剑','https://www.ilikexff.cn']">
      <div style="" />
      <el-skeleton :rows="5" animated  :loading="loading">
        <div class="post-html" v-html="articles.content" />
      </el-skeleton>
</el-watermark>

文字样式太单调?给点颜色看看。通过:font属性可以自定义文字水印的样式,在javascript部分中添加下面的代码,默认模板中指定了水印的颜色，通过RGBA的格式；

import { reactive} from 'vue'
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

尝试修改水印颜色为浅蓝色调，代码如下:

const font = reactive({
  color: 'rgba(196, 196, 251)',
})

关于文字水印的部分就先告一段落，更多支持的样式属性参考:官方文档

---

2.2 图片水印

要实现上述的效果，只需要在原来代码的基础上添加下面的三个属性即可:

:width="130"
:height="30"
image="https://images.waer.ltd/notes/transient.svg

完整代码:

<el-card style="max-width: 1000px;margin: 0 auto;">
  <el-watermark :font="font"
                :width="130"
                :height="30"
                image="https://images.waer.ltd/notes/transient.svg"
  >
    <div style="" />
  <el-skeleton :rows="5" animated  :loading="loading">
    <div class="post-html" v-html="articles.content" />
  </el-skeleton>
  </el-watermark>

更多的API参考:

---