TUI

<template>
  <div style="width: 100%; height: 300px" ref="waterParentRef">
    <TsWatermark :container="() => waterParentRef!" content="内部资料 禁止外传" :fontSize="14" color="rgba(0,0,0,0.12)"  :tileWidth="120" :tileHeight="100" />
  </div>
</template>

<script setup lang="ts">
import { TsWatermark } from 'tui';
import { ref } from 'vue';
const waterParentRef = ref<HTMLElement>();
</script>

<template>
  <TsButton @click="visible = !visible">切换显示</TsButton>
  <div style="width: 100%; height: 300px" ref="waterParentRef">
    <TsWatermark :visible="visible" :container="() => waterParentRef!" content="难道会被关闭吗" :fontSize="14" color="rgba(0,0,0,0.12)" :rotate="-30" :tileWidth="120" :tileHeight="100" />
  </div>
</template>

<script setup lang="ts">
import { TsWatermark } from 'tui';
import { ref } from 'vue';
const waterParentRef = ref<HTMLElement>();
const visible = ref(true);
</script>

<template>
  <div style="width: 100%; height: 300px" ref="waterParentRef">
    <TsWatermark :container="() => waterParentRef!" :content="content" :fontSize="15" :opacity="0.6" color="rgba(12, 142, 248)" :tileWidth="190" :rotate="20"></TsWatermark>
  </div>
</template>

<script setup lang="ts">
import { TsWatermark, dateFormat } from 'tui';
import { ref } from 'vue';
const content = ['Confidential', 'User: Tom', dateFormat({ format: 'YYYY-MM-DD hh:mm:ss' })];
const waterParentRef = ref<HTMLElement>();
</script>

<template>
  <div style="display: flex; gap: 24px;">
    <div style="flex: 1;">
      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #374151;">默认容器 (body)</h4>
      <TsButton @click="showBodyWatermark = !showBodyWatermark">
        {{ showBodyWatermark ? '移除' : '添加' }}全屏水印
      </TsButton>
      <TsWatermark 
        v-if="showBodyWatermark"
        content="全屏水印" 
        :opacity="0.1"
        color="#ff4757"
      />
    </div>
    
    <div style="flex: 1;">
      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #374151;">自定义容器</h4>
      <div style="width: 100%; height: 200px; border: 2px solid #d1d5db; position: relative; border-radius: 8px;" ref="customContainerRef">
        <p style="padding: 20px; margin: 0; font-size: 14px; color: #6b7280;">这个区域有独立水印</p>
        <TsWatermark 
          :container="() => customContainerRef!"
          content="自定义容器" 
          :opacity="0.2"
          color="#3498db"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsWatermark, TsButton } from 'tui';
import { ref } from 'vue';

const showBodyWatermark = ref(false);
const customContainerRef = ref<HTMLElement>();
</script>

<template>
  <div style="display: flex; gap: 24px;">
    <div style="flex: 1;">
      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #374151;">默认行高</h4>
      <div style="width: 100%; height: 250px; border: 1px solid #d1d5db; border-radius: 8px;" ref="container1Ref">
        <TsWatermark 
          :container="() => container1Ref!"
          :content="multiLineContent"
          :fontSize="14"
          color="rgba(0,0,0,0.15)"
        />
      </div>
    </div>
    
    <div style="flex: 1;">
      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #374151;">自定义行高 (lineHeight: 24)</h4>
      <div style="width: 100%; height: 250px; border: 1px solid #d1d5db; border-radius: 8px;" ref="container2Ref">
        <TsWatermark 
          :container="() => container2Ref!"
          :content="multiLineContent"
          :fontSize="14"
          :lineHeight="24"
          color="rgba(0,0,0,0.15)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsWatermark } from 'tui';
import { ref } from 'vue';

const multiLineContent = [
  '机密文件',
  '严禁外传',
  '2024-01-01'
];

const container1Ref = ref<HTMLElement>();
const container2Ref = ref<HTMLElement>();
</script>

<template>
  <div style="position: relative; width: 100%; height: 300px; border: 1px solid #d1d5db; border-radius: 8px;" ref="containerRef">
    <!-- 模拟内容 -->
    <div style="position: absolute; top: 20px; left: 20px; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10;">
      <h5 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600; color: #374151;">浮层内容 (z-index: 10)</h5>
      <p style="margin: 0; font-size: 13px; color: #6b7280;">这个浮层应该在水印之上</p>
    </div>
    
    <!-- 水印 -->
    <TsWatermark 
      :container="() => containerRef!"
      content="底层水印"
      :zIndex="1"
      color="rgba(59, 130, 246, 0.1)"
    />
    
    <!-- 高层级水印 -->
    <TsWatermark 
      :container="() => containerRef!"
      content="顶层水印"
      :zIndex="20"
      color="rgba(239, 68, 68, 0.1)"
    />
  </div>
</template>

<script setup lang="ts">
import { TsWatermark } from 'tui';
import { ref } from 'vue';

const containerRef = ref<HTMLElement>();
</script>