Vant

繁體中文

简体中文
English

繁體中文

简体中文
English

Appearance

💧 Watermark 水印 - 你的內容守護者 ​

🌟 介紹 ​

想要保護你的珍貴內容不被盜用？Watermark 水印組件就是你的貼心守護者！🛡️

它可以在頁面上優雅地添加文字或圖案水印，就像給你的內容蓋上一個專屬印章 📝。無論是重要文檔、設計作品還是敏感信息，都能得到有效的保護。

🎯 核心特性：

  • 🔤 文字水印：支援自定義文字內容和樣式
  • 🖼️ 圖片水印：支援 Logo、簽名等圖片水印
  • 🎨 HTML 水印：支援富文本和複雜樣式
  • 📐 靈活佈局：自定義間距、角度、透明度
  • 🌍 全屏覆蓋：可選擇局部或全屏顯示
  • ⚡ 性能優化：輕量級實現，不影響頁面性能

💡 版本要求：請升級 vant 到 >= 4.2.0 版本來使用該組件。

📦 引入 ​

通過以下方式來全局註冊組件，更多註冊方式請參考組件註冊。

js
import { createApp } from 'vue';
import { Watermark } from 'vant';

const app = createApp();
app.use(Watermark);

🎮 代碼演示 ​

📝 文字水印 ​

最簡單的使用方式，通過 content 屬性設置水印文字，適合版權聲明、機密標識等場景。

vue
<template>
  <div class="demo-container">
    <van-watermark content="Vant Watermark">
      <div class="content">
        <h3>📄 重要文檔</h3>
        <p>這裏是需要保護的重要內容...</p>
        <p>水印會自動覆蓋在內容上方，起到保護作用。</p>
      </div>
    </van-watermark>
  </div>
</template>

<style>
.demo-container {
  height: 300px;
  background: #f7f8fa;
}
.content {
  padding: 20px;
  background: white;
  border-radius: 8px;
  margin: 20px;
}
</style>

🖼️ 圖片水印 ​

使用企業 Logo 或個人簽名作為水印，更具專業性和品牌識別度。

vue
<template>
  <div class="demo-container">
    <van-watermark 
      image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-logo.png"
      :opacity="0.3"
      :width="120"
      :height="64"
    >
      <div class="content">
        <h3>🎨 設計作品</h3>
        <p>這是一個需要版權保護的設計作品</p>
        <div class="image-placeholder">
          [設計圖片區域]
        </div>
      </div>
    </van-watermark>
  </div>
</template>

<style>
.image-placeholder {
  width: 100%;
  height: 150px;
  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-top: 16px;
}
</style>

📏 自定義間隔 ​

通過調整水印間距，創造不同的視覺效果，適應各種設計需求。

vue
<template>
  <div class="demo-container">
    <!-- 密集水印 -->
    <van-watermark 
      content="CONFIDENTIAL"
      :gap-x="50"
      :gap-y="50"
      text-color="#ff6b6b"
      :opacity="0.15"
    >
      <div class="content">
        <h3>🔒 機密文檔</h3>
        <p>密集的水印提供更強的保護效果</p>
      </div>
    </van-watermark>
    
    <!-- 稀疏水印 -->
    <van-watermark 
      content="DRAFT"
      :gap-x="200"
      :gap-y="150"
      text-color="#4ecdc4"
      :opacity="0.2"
    >
      <div class="content">
        <h3>📋 草稿文檔</h3>
        <p>稀疏的水印保持內容清晰度</p>
      </div>
    </van-watermark>
  </div>
</template>

🔄 自定義傾斜角度 ​

調整水印角度，創造更自然的視覺效果，避免與內容產生衝突。

vue
<template>
  <div class="demo-container">
    <!-- 轻微倾斜 -->
    <van-watermark 
      content="© 2024 Your Company"
      :rotate="-15"
      text-color="#95a5a6"
    >
      <div class="content">
        <h3>📊 數據報告</h3>
        <p>輕微傾斜的水印更加自然</p>
      </div>
    </van-watermark>
    
    <!-- 垂直水印 -->
    <van-watermark 
      content="SAMPLE"
      :rotate="90"
      text-color="#e74c3c"
      :opacity="0.1"
    >
      <div class="content">
        <h3>📋 樣本文檔</h3>
        <p>垂直水印適合特殊場景</p>
      </div>
    </van-watermark>
  </div>
</template>

🌍 顯示範圍控制 ​

根據需要選擇局部或全屏水印，靈活適應不同的保護需求。

vue
<template>
  <div class="demo-container">
    <!-- 局部水印 -->
    <div class="section">
      <h4>📍 局部水印</h4>
      <van-watermark content="Local Watermark">
        <div class="content">
          <p>水印只在這個區域顯示</p>
        </div>
      </van-watermark>
    </div>
    
    <!-- 全屏水印 -->
    <div class="section">
      <h4>🌐 全屏水印</h4>
      <van-watermark 
        content="Full Page Watermark"
        :full-page="true"
        :opacity="0.05"
      >
        <div class="content">
          <p>水印覆蓋整個頁面</p>
        </div>
      </van-watermark>
    </div>
  </div>
</template>

🎨 HTML 水印 ​

使用 HTML 創建複雜的水印效果，支援多行文字、圖標組合等高級樣式。

vue
<template>
  <div class="demo-container">
    <van-watermark>
      <template #content>
        <div style="color: #3498db; font-size: 16px; text-align: center;">
          <div style="font-weight: bold;">🏢 Your Company</div>
          <div style="font-size: 12px; margin-top: 4px;">© 2024 All Rights Reserved</div>
          <div style="font-size: 10px; color: #95a5a6;">ID: WM-001</div>
        </div>
      </template>
      
      <div class="content">
        <h3>🎯 高級水印</h3>
        <p>使用 HTML 插槽創建複雜的水印效果</p>
        <p>支援多行文字、不同樣式的組合</p>
      </div>
    </van-watermark>
  </div>
</template>

🎪 動態水印 ​

結合 Vue 的響應式特性，創建動態變化的水印效果。

vue
<template>
  <div class="demo-container">
    <van-watermark 
      :content="dynamicContent"
      :rotate="currentRotate"
      :opacity="currentOpacity"
      text-color="#9b59b6"
    >
      <div class="content">
        <h3>⚡ 動態水印</h3>
        <p>當前時間：{{ currentTime }}</p>
        <p>用戶：{{ currentUser }}</p>
        
        <div class="controls">
          <button @click="toggleAnimation">
            {{ isAnimating ? '停止動畫' : '開始動畫' }}
          </button>
        </div>
      </div>
    </van-watermark>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const currentTime = ref(new Date().toLocaleString());
const currentUser = ref('張三');
const currentRotate = ref(-22);
const currentOpacity = ref(0.1);
const isAnimating = ref(false);

let timer = null;
let animationTimer = null;

// 動態內容
const dynamicContent = computed(() => {
  return `${currentUser.value} - ${currentTime.value}`;
});

// 更新時間
const updateTime = () => {
  currentTime.value = new Date().toLocaleString();
};

// 動畫效果
const toggleAnimation = () => {
  isAnimating.value = !isAnimating.value;
  
  if (isAnimating.value) {
    animationTimer = setInterval(() => {
      currentRotate.value = -22 + Math.sin(Date.now() / 1000) * 10;
      currentOpacity.value = 0.1 + Math.sin(Date.now() / 500) * 0.05;
    }, 100);
  } else {
    clearInterval(animationTimer);
    currentRotate.value = -22;
    currentOpacity.value = 0.1;
  }
};

onMounted(() => {
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
  clearInterval(animationTimer);
});
</script>

<style>
.controls {
  margin-top: 16px;
}
.controls button {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

📚 API 參考 ​

Props ​

參數說明類型默認值示例
width💾 水印寬度number100120
height📏 水印高度number10064
z-index🔝 水印的 z-index 層級number | string100999
content📝 文字水印的內容string-'© 2024 Company'
image🖼️ 圖片水印的內容，優先級高於 contentstring-'logo.png'
rotate🔄 水印的旋轉角度（度）number | string-2245
full-page🌍 水印是否全屏顯示booleanfalsetrue
gap-x↔️ 水印之間的水平間隔number0100
gap-y↕️ 水印之間的垂直間隔number080
text-color🎨 文字水印的顏色string#dcdee0'#ff6b6b'
opacity👻 水印的透明度number | string-0.3

Slots ​

名稱說明示例
content🎨 HTML 水印的內容，僅支援行內樣式，優先級最高複雜的多行水印

類型定義 ​

組件導出以下類型定義：

ts
import type { WatermarkProps } from 'vant';

// 水印組件的屬性類型
interface WatermarkProps {
  width?: number;
  height?: number;
  zIndex?: number | string;
  content?: string;
  image?: string;
  rotate?: number | string;
  fullPage?: boolean;
  gapX?: number;
  gapY?: number;
  textColor?: string;
  opacity?: number | string;
}

🎯 實際應用場景 ​

📄 文檔保護 ​

vue
<!-- 企業內部文檔 -->
<van-watermark 
  content="內部機密 - 禁止外傳"
  text-color="#e74c3c"
  :opacity="0.15"
  :gap-x="150"
  :gap-y="100"
>
  <div class="document">
    <!-- 文檔內容 -->
  </div>
</van-watermark>

🎨 設計作品 ​

vue
<!-- 設計師作品集 -->
<van-watermark 
  image="/logo.png"
  :opacity="0.2"
  :width="100"
  :height="50"
  :gap-x="200"
  :gap-y="150"
>
  <div class="portfolio">
    <!-- 設計作品 -->
  </div>
</van-watermark>

📊 數據報表 ​

vue
<!-- 財務報表 -->
<van-watermark>
  <template #content>
    <div style="text-align: center; color: #95a5a6;">
      <div>財務部門</div>
      <div style="font-size: 12px;">{{ new Date().toLocaleDateString() }}</div>
    </div>
  </template>
  
  <div class="report">
    <!-- 報表內容 -->
  </div>
</van-watermark>

📱 移動端應用 ​

vue
<!-- 移動端截圖保護 -->
<van-watermark 
  content="App 內容截圖"
  :full-page="true"
  :opacity="0.08"
  text-color="#3498db"
  :rotate="-30"
>
  <div class="mobile-content">
    <!-- 移動端內容 -->
  </div>
</van-watermark>

💡 最佳實踐 ​

🎯 透明度設置 ​

js
// ✅ 推薦的透明度範圍
const opacity = {
  subtle: 0.05,      // 極其微妙，幾乎不可見
  light: 0.1,        // 輕微可見，不影響閱讀
  normal: 0.15,      // 正常可見，平衡保護和體驗
  strong: 0.3,       // 強烈可見，強保護需求
  maximum: 0.5       // 最大可見，特殊場景使用
};

🎨 顏色選擇 ​

js
// 根據背景選擇合適的水印顏色
const colorSchemes = {
  lightBackground: '#000000',    // 淺色背景用深色水印
  darkBackground: '#ffffff',     // 深色背景用淺色水印
  colorfulBackground: '#808080', // 彩色背景用中性色
  brandColor: '#your-brand-color' // 使用品牌色
};

📐 尺寸和間距 ​

js
// 推薦的尺寸配置
const sizeConfigs = {
  dense: { gapX: 50, gapY: 50 },     // 密集保護
  normal: { gapX: 100, gapY: 80 },   // 正常間距
  sparse: { gapX: 200, gapY: 150 },  // 稀疏佈局
  minimal: { gapX: 300, gapY: 200 }  // 最小干擾
};

🔄 動態水印 ​

vue
<script setup>
// 根據用戶信息生成動態水印
const generateWatermark = (user) => {
  return `${user.name} - ${user.department} - ${new Date().toLocaleString()}`;
};

// 根據內容敏感度調整水印強度
const getWatermarkConfig = (sensitivity) => {
  const configs = {
    low: { opacity: 0.05, gapX: 300, gapY: 200 },
    medium: { opacity: 0.1, gapX: 150, gapY: 100 },
    high: { opacity: 0.2, gapX: 80, gapY: 60 }
  };
  return configs[sensitivity] || configs.medium;
};
</script>

🛠️ 調試技巧 ​

🔍 水印可見性調試 ​

vue
<script setup>
// 開發環境下增強水印可見性
const debugMode = process.env.NODE_ENV === 'development';
const debugOpacity = debugMode ? 0.5 : 0.1;
const debugColor = debugMode ? '#ff0000' : '#dcdee0';
</script>

📊 性能監控 ​

js
// 監控水印渲染性能
const measureWatermarkPerformance = () => {
  const start = performance.now();
  
  // 水印渲染逻辑
  
  const end = performance.now();
  console.log(`水印渲染耗時: ${end - start}ms`);
};

⚡ 性能優化 ​

🎯 減少重繪 ​

vue
<script setup>
// 使用 computed 避免不必要的重新計算
const watermarkConfig = computed(() => ({
  content: props.content,
  opacity: props.opacity,
  rotate: props.rotate
}));

// 使用 watchEffect 優化響應式更新
watchEffect(() => {
  if (watermarkConfig.value.content) {
    updateWatermark();
  }
});
</script>

🖼️ 圖片優化 ​

js
// 優化圖片水印加載
const optimizeImageWatermark = (imageUrl) => {
  // 预加载图片
  const img = new Image();
  img.onload = () => {
    // 圖片加載完成後應用水印
    applyImageWatermark(img);
  };
  img.src = imageUrl;
};

🎨 主題定制 ​

樣式變量 ​

組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 ConfigProvider 組件。

名稱默認值描述使用場景
--van-watermark-z-index100根節點的 z-index 層級調整水印層級關係

自定義主題示例 ​

css
/* 企業主題 */
.enterprise-watermark {
  --van-watermark-z-index: 999;
}

/* 設計師主題 */
.designer-watermark {
  --van-watermark-z-index: 50;
}

🌐 瀏覽器兼容性 ​

瀏覽器版本支持特殊說明
Chrome60+✅ 完全支持
Firefox60+✅ 完全支持
Safari12+✅ 完全支持
Edge79+✅ 完全支持
iOS Safari12+✅ 移動端支持
Android Chrome60+✅ 移動端支持

📖 相關文檔 ​

🎯 核心組件 ​

🛠️ 開發工具 ​

🎉 開始使用 Watermark 組件保護你的內容吧！ 選擇合適的水印類型和配置，為你的應用添加專業的內容保護功能！

基於Vant構建的企業級移動端解決方案

Copyright © 2025 siex.cn ｜ sitemap