Vant

日本語

繁體中文
简体中文
English

日本語

繁體中文
简体中文
English

Appearance

💧 Watermark 透かし - コンテンツの守護者 ​

🌟 紹介 ​

貴重なコンテンツを盗用から守りたいですか？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;">© 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 | 💾 透かしの幅 | *number* | `100` | `120` |
| height | 📏 透かしの高さ | *number* | `100` | `64` |
| z-index | 🔝 透かしの z-index レベル | *number \| string* | `100` | `999` |
| content | 📝 文字透かしの内容 | *string* | - | `'© 2024 Company'` |
| image | 🖼️ 画像透かしの内容、contentより優先 | *string* | - | `'logo.png'` |
| rotate | 🔄 透かしの回転角度（度） | *number \| string* | `-22` | `45` |
| full-page | 🌍 透かしを全画面表示するかどうか | *boolean* | `false` | `true` |
| gap-x | ↔️ 透かし間の水平間隔 | *number* | `0` | `100` |
| gap-y | ↕️ 透かし間の垂直間隔 | *number* | `0` | `80` |
| 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