vue3使用element-plus制作水印

在element plus文档的示例代码如下：

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { isDark } from '~/composables/dark'

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

watch(
  isDark,
  () => {
    font.color = isDark.value
      ? 'rgba(255, 255, 255, .15)'
      : 'rgba(0, 0, 0, .15)'
  },
  {
    immediate: true,
  }
)
</script>

<template>
  <el-watermark :font="font">
    <div style="height: 500px" />
  </el-watermark>
</template>

当我使用文档里面的代码时

import { reactive, watch } from 'vue'
import { isDark } from '~/composables/dark'

首先得去源码里面去复制了dark.ts里的代码。

结果是它并不生效，我甚至怀疑是我的水印层级不够，被覆盖了，后来发现不是。

是文字的颜色跟随了浏览器颜色变化而变化。如果你的浏览器系统是深色的，文字则会变成白色。

所以正确的解决方法是 要么去掉watch监听的代码，要么就更换一下三目表达式的顺序，把color设置成正确的颜色即可。

其次，当你想将水印设置成文字时，可直接添加在属性中 :content=['']，设置多行或单行

<el-watermark :font="font" :content="['Element+', 'Element Plus']">
    <div style="height: 500px" />
 </el-watermark>