element plus watermark 水印文字和图片一起显示

Element Plus 是基于 Vue.js 的 UI 组件库，提供了一个名为 `ElImage` 的组件用于处理图片显示，而 `watermark` 属性通常用于添加图片水印效果。如果你想要同时显示文字和图片水印，你可以组合使用 Element UI 的 `ElImage` 和自定义 CSS 或者使用 `v-if` 或 `v-show` 来切换显示文字或图片。

以下是如何在 `ElImage` 中添加文字水印的一个示例：

<template>
  <el-image :src="imageUrl" :width="imageWidth" :height="imageHeight">
    <span v-if="showTextWatermark" class="text-watermark">{{ textWatermark }}</span>
    <img v-if="!showTextWatermark && showImageWatermark" :src="watermarkUrl" :class="{ 'absolute-bottom-right': position === 'bottom-right' }" />
  </el-image>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const imageUrl = ref('');
const imageWidth = ref('100%');
const imageHeight = ref('auto');
const textWatermark = ref('Your Text Watermark');
const watermarkUrl = ref('path/to/your/image.png');
const showTextWatermark = ref(true); // 初始显示文字水印
const position = ref('bottom-right'); // 水印位置，如 bottom-right
</script>

<style scoped>
.text-watermark {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 根据需求调整字体大小、颜色等样式 */
  color: rgba(0, 0, 0, 0.5);
}
</style>

在这个例子中，我们首先创建了两个 `ref`，分别用来存储文字水印和图片水印的 URL。然后在模板中，根据 `showTextWatermark` 变量决定是否显示文字水印，如果 `showTextWatermark` 为真，则显示文字；如果为假，显示图片水印。