Vant

繁體中文

简体中文
English
日本語

繁體中文

简体中文
English
日本語

Appearance

💧 ウォーターマーク - あなたのコンテンツ守護者 ​

🌟 紹介 ​

大切なコンテンツを無断利用から守りたいですか？Watermark ウォーターマークコンポーネントがあなたの心強い守護者となります！🛡️

ページに優雅にテキストや画像のウォーターマークを追加し、まるでコンテンツに専用の印章を押すように📝、重要な文書、デザイン作品、機密情報などを効果的に保護します。

🎯 コア機能：

  • 🔤 テキストウォーターマーク：カスタムテキストコンテンツとスタイルをサポート
  • 🖼️ 画像ウォーターマーク：ロゴ、署名などの画像ウォーターマークをサポート
  • 🎨 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>

🖼️ 画像ウォーターマーク ​

画像ウォーターマークは、企業ロゴや個人署名などを使用して、コンテンツの专业性と品牌識別度を高めます。

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;">© 2025 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-'© 2025 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