Vant移动端UI企业官网

简体中文

繁體中文
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