豆包：使用 <van-watermark> 标签来实现让水印只显示在一个特定 div 里

可以直接使用 <van-watermark> 标签来实现让水印只显示在一个特定 div 里，下面为你详细介绍实现方式。

思路分析

<van-watermark> 组件本身有一个 wrap 属性，它允许你指定水印要覆盖的元素。所以，我们可以先给目标 div 设置一个引用（ref），然后在 <van-watermark> 组件中使用这个引用作为 wrap 属性的值，这样就能让水印仅显示在该 div 内部。

代码示例

<template>
  <div>
    <!-- 特定的 div，水印将显示在这个 div 内 -->
    <div ref="targetDivRef" style="width: 400px; height: 300px; background-color: #f0f0f0;">
      <p>这是需要添加水印的内容。</p>
    </div>
    <!-- 其他内容，不会显示水印 -->
    <div style="width: 400px; height: 200px; background-color: #e0e0e0;">
      <p>这是不需要添加水印的内容。</p>
    </div>
    <!-- 使用 van-watermark 组件，并指定 wrap 属性 -->
    <van-watermark
      :wrap="targetDivRef"
      content="水印文本"
      :font-size="16"
      :alpha="0.3"
      :rotate="-30"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建一个 ref 来引用特定的 div
const targetDivRef = ref(null);
</script>

<style scoped>
/* 可以在这里添加组件的样式 */
</style>

代码解释

1. 模板部分：

   • 定义了一个 ref 为 targetDivRef 的 div，此 div 就是我们希望添加水印的目标区域。
   • 另外有一个普通的 div，它不会显示水印。
   • 使用 <van-watermark> 组件，通过 :wrap="targetDivRef" 将水印包裹在 targetDivRef 对应的 div 中。同时，还设置了水印的文本内容、字体大小、透明度和旋转角度等属性。

2. 脚本部分：

   • 利用 ref 创建了 targetDivRef，用于引用目标 div。

注意事项

• 要保证在使用 <van-watermark> 之前，已经正确引入了 Vant 组件库及其样式。
• 当使用 wrap 属性时，要确保传递的是一个有效的 DOM 元素引用（通过 ref 创建），这样水印才能正确显示在指定的 div 内。