Tencent · anlyyao · Sep 4, 2025 · Jul 18, 2025 · Jul 22, 2025 · Jul 22, 2025
@@ -90,7 +90,8 @@
     "pages/col/col",
     "pages/col/skyline/col",
     "pages/color-picker/color-picker",
-    "pages/guide/guide"
+    "pages/guide/guide",
+    "pages/watermark/watermark"
   ],
   "subpackages": [
     {

@@ -79,6 +79,10 @@ const display = {
       name: 'Tag',
       label: '标签',
     },
+    {
+      name: 'Watermark',
+      label: '水印',
+    },
   ],
 };
 

@@ -406,6 +406,12 @@
           "query": "",
           "scene": null
         },
+        {
+          "name": "watermark",
+          "pathName": "pages/watermark/watermark",
+          "query": "",
+          "scene": null
+        },
         {
           "id": -1,
           "name": "search",

@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+alpha | Number | 1 | \- | N
+content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+height | Number | - | \- | N
+is-repeat | Boolean | true | \- | N
+line-space | Number | 16 | \- | N
+movable | Boolean | false | \- | N
+move-interval | Number | 3000 | \- | N
+offset | Array | - | Typescript：`Array<number>` | N
+removable | Boolean | true | \- | N
+rotate | Number | -22 | \- | N
+watermark-content | Object / Array | - | Typescript：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | \- | N
+x | Number | - | \- | N
+y | Number | - | \- | N
+z-index | Number | - | \- | N
+
+### WatermarkText
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | \- | N
+font-family | String | - | font-family configuration for watermark text | N
+font-size | Number | 16 | \- | N
+font-weight | String | normal | options: normal/lighter/bold/bolder | N
+text | String | - | \- | N
+
+### WatermarkImage
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | \- | N
+url | String | - | \- | N
@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+content | String / Slot | - | 水印所覆盖的内容节点。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+height | Number | - | 水印高度 | N
+is-repeat | Boolean | true | 水印是否重复出现 | N
+line-space | Number | 16 | 行间距，只作用在多行（`content` 配置为数组）情况下 | N
+movable | Boolean | false | 水印是否可移动 | N
+move-interval | Number | 3000 | 水印发生运动位移的间隙，单位：毫秒 | N
+offset | Array | - | 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`。TS 类型：`Array<number>` | N
+removable | Boolean | true | 水印是否可被删除 | N
+rotate | Number | -22 | 水印旋转的角度，单位 ° | N
+watermark-content | Object / Array | - | 水印内容，需要显示多行情况下可配置为数组。TS 类型：`WatermarkText\|WatermarkImage\|Array<WatermarkText\|WatermarkImage>` | N
+width | Number | - | 水印宽度 | N
+x | Number | - | 水印之间的水平间距 | N
+y | Number | - | 水印之间的垂直间距 | N
+z-index | Number | - | 水印元素的 `z-index`，默认值写在 CSS 中 | N
+
+### WatermarkText
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+font-color | String | rgba(0,0,0,0.1) | 水印文本文字颜色 | N
+font-family | String | - | 水印文本文字字体 | N
+font-size | Number | 16 | 水印文本文字大小 | N
+font-weight | String | normal | 水印文本文字粗细。可选项：normal/lighter/bold/bolder | N
+text | String | - | 水印文本内容 | N
+
+### WatermarkImage
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+is-grayscale | Boolean | false | 水印图片是否需要灰阶显示 | N
+url | String | - | 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图 | N
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    watermark: { text: '文字水印' },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" y="{{56}}" x="{{56}}" width="{{68}}" height="{{52}}">
+  <view style="width: 100%; height: 340px" />
+</t-watermark>
@@ -0,0 +1,8 @@
+Component({
+  data: {
+    watermark: {
+      url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png',
+      isGrayscale: true,
+    },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" width="{{120}}" height="{{20}}" x="{{56}}" y="{{76}}" alpha="{{0.3}}">
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    watermark: { url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png' },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" width="{{120}}" height="{{20}}" x="{{56}}" y="{{76}}">
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    watermark: { url: 'https://tdesign.gtimg.com/site/baseLogo-light.png' },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" x="{{100}}" y="{{140}}" width="{{120}}" height="{{30}}" movable>
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1,5 @@
+Component({
+  data: {
+    watermark: { text: '文字水印' },
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,3 @@
+<t-watermark watermark-content="{{watermark}}" width="{{120}}" height="{{60}}" y="{{200}}" x="{{210}}" movable>
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1,8 @@
+Component({
+  data: {
+    watermark: [
+      { text: '水印文本', fontColor: 'black' },
+      { url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png', isGrayscale: true },
+    ],
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,11 @@
+<t-watermark
+  watermark-content="{{watermark}}"
+  line-space="{{24}}"
+  x="{{56}}"
+  y="{{76}}"
+  width="{{120}}"
+  height="{{20}}"
+  alpha="{{0.3}}"
+>
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1,8 @@
+Component({
+  data: {
+    watermark: [
+      { text: '水印文本', fontColor: 'black' },
+      { url: 'https://tdesign.gtimg.com/starter/brand-logo-light.png' },
+    ],
+  },
+});
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-watermark": "tdesign-miniprogram/watermark/watermark"
+  }
+}
@@ -0,0 +1,11 @@
+<t-watermark
+  watermark-content="{{watermark}}"
+  line-space="{{24}}"
+  x="{{56}}"
+  y="{{76}}"
+  width="{{120}}"
+  height="{{20}}"
+  alpha="{{0.3}}"
+>
+  <view style="width: 100%; height: 300px" />
+</t-watermark>
@@ -0,0 +1 @@
+Page({});
@@ -0,0 +1,12 @@
+{
+  "navigationBarTitleText": "Watermark",
+  "usingComponents": {
+    "base": "./base",
+    "image-watermark": "./image",
+    "multi-line-watermark": "./multi-line",
+    "multi-line-gray-watermark": "./multi-line-gray",
+    "move-text-watermark": "./move-text",
+    "move-image-watermark": "./move-image",
+    "gray-watermark": "./gray"
+  }
+}
@@ -0,0 +1,31 @@
+<t-navbar title="Watermark" leftArrow />
+<view class="demo">
+  <t-demo-header title="Watermark 水印" desc="给页面的某个区域加上水印。" notice="渲染框架支持情况：WebView" />
+  <t-demo title="01 组件类型" desc="文字水印">
+    <base />
+  </t-demo>
+
+  <t-demo desc="图片水印">
+    <image-watermark />
+  </t-demo>
+
+  <t-demo desc="图片灰阶水印">
+    <gray-watermark />
+  </t-demo>
+
+  <t-demo desc="多行图文水印">
+    <multi-line-watermark />
+  </t-demo>
+
+  <t-demo desc="多行图文灰阶水印">
+    <multi-line-gray-watermark />
+  </t-demo>
+
+  <t-demo desc="运动文字水印">
+    <move-text-watermark />
+  </t-demo>
+
+  <t-demo desc="运动图片水印">
+    <move-image-watermark />
+  </t-demo>
+</view>
@@ -0,0 +1,78 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdWatermarkProps } from './type';
+const props: TdWatermarkProps = {
+  /** 水印整体透明度，取值范围 [0-1] */
+  alpha: {
+    type: Number,
+    value: 1,
+  },
+  /** 水印所覆盖的内容节点 */
+  content: {
+    type: String,
+  },
+  /** 水印高度 */
+  height: {
+    type: Number,
+  },
+  /** 水印是否重复出现 */
+  isRepeat: {
+    type: Boolean,
+    value: true,
+  },
+  /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
+  lineSpace: {
+    type: Number,
+    value: 16,
+  },
+  /** 水印是否可移动 */
+  movable: {
+    type: Boolean,
+    value: false,
+  },
+  /** 水印发生运动位移的间隙，单位：毫秒 */
+  moveInterval: {
+    type: Number,
+    value: 3000,
+  },
+  /** 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` */
+  offset: {
+    type: Array,
+  },
+  /** 水印是否可被删除 */
+  removable: {
+    type: Boolean,
+    value: true,
+  },
+  /** 水印旋转的角度，单位 ° */
+  rotate: {
+    type: Number,
+    value: -22,
+  },
+  /** 水印内容，需要显示多行情况下可配置为数组 */
+  watermarkContent: {
+    type: null,
+  },
+  /** 水印宽度 */
+  width: {
+    type: Number,
+  },
+  /** 水印之间的水平间距 */
+  x: {
+    type: Number,
+  },
+  /** 水印之间的垂直间距 */
+  y: {
+    type: Number,
+  },
+  /** 水印元素的 `z-index`，默认值写在 CSS 中 */
+  zIndex: {
+    type: Number,
+  },
+};
+
+export default props;