@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/watermark/README.en-US.md

@@ -0,0 +1,63 @@
+:: BASE_DOC ::
+
+## API
+
+### Watermark Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+alpha | Number | 1 | \- | N
+content | String | - | \- | N
+height | Number | - | \- | N
+is-repeat | Boolean | true | \- | N
+layout | String | rectangular | options: rectangular/hexagonal | 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
+
+### Watermark Slots
+
+name | Description
+-- | --
+\- | \-
+content | \-
+
+### 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
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--watermark-left-0 | --watermark-left-0 | -
+--watermark-left-25 | --watermark-left-25 | -
+--watermark-left-50 | --watermark-left-50 | -
+--watermark-left-75 | --watermark-left-75 | -
+--watermark-top-0 | --watermark-top-0 | -
+--watermark-top-25 | --watermark-top-25 | -
+--watermark-top-50 | --watermark-top-50 | -
+--watermark-top-75 | --watermark-top-75 | -

package/dist/watermark/README.md

@@ -0,0 +1,115 @@
+---
+title: Watermark 水印
+description: 给页面的某个区域加上水印。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TWatermark from '@tdesign/uniapp/watermark/watermark.vue';
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 文字水印
+
+{{ base }}
+
+#### 图片水印
+
+{{ image }}
+
+#### 图片灰阶水印
+
+{{ gray }}
+
+#### 多行图文水印
+
+{{ multi-line }}
+
+#### 多行图文灰阶水印
+
+{{ multi-line-gray }}
+
+#### 运动文字水印
+
+{{ move-text }}
+
+#### 运动图片水印
+
+{{ move-image }}
+
+### 不同布局的水印 
+通过设置 layout 使用不同的布局。
+
+{{ layout }}
+
+
+## API
+
+### Watermark Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+alpha | Number | 1 | 水印整体透明度，取值范围 [0-1] | N
+content | String | - | 水印所覆盖的内容节点 | N
+height | Number | - | 水印高度 | N
+is-repeat | Boolean | true | 水印是否重复出现 | N
+layout | String | rectangular | 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印。可选项：rectangular/hexagonal | 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
+
+### Watermark Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，作用同 `content` 插槽
+content | 自定义 `content` 显示内容
+
+### 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
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--watermark-left-0 | --watermark-left-0 | -
+--watermark-left-25 | --watermark-left-25 | -
+--watermark-left-50 | --watermark-left-50 | -
+--watermark-left-75 | --watermark-left-75 | -
+--watermark-top-0 | --watermark-top-0 | -
+--watermark-top-25 | --watermark-top-25 | -
+--watermark-top-50 | --watermark-top-50 | -
+--watermark-top-75 | --watermark-top-75 | -

package/dist/watermark/props.ts

@@ -0,0 +1,82 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdWatermarkProps } from './type';
+export default {
+  /** 水印整体透明度，取值范围 [0-1] */
+  alpha: {
+    type: Number,
+    default: 1,
+  },
+  /** 水印所覆盖的内容节点 */
+  content: {
+    type: String,
+  },
+  /** 水印高度 */
+  height: {
+    type: Number,
+  },
+  /** 水印是否重复出现 */
+  isRepeat: {
+    type: Boolean,
+    default: true,
+  },
+  /** 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印 */
+  layout: {
+    type: String,
+    default: 'rectangular' as TdWatermarkProps['layout'],
+    validator(val: TdWatermarkProps['layout']): boolean {
+      if (!val) return true;
+      return ['rectangular', 'hexagonal'].includes(val);
+    },
+  },
+  /** 行间距，只作用在多行（`content` 配置为数组）情况下 */
+  lineSpace: {
+    type: Number,
+    default: 16,
+  },
+  /** 水印是否可移动 */
+  movable: Boolean,
+  /** 水印发生运动位移的间隙，单位：毫秒 */
+  moveInterval: {
+    type: Number,
+    default: 3000,
+  },
+  /** 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]` */
+  offset: {
+    type: Array,
+  },
+  /** 水印是否可被删除 */
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 水印旋转的角度，单位 ° */
+  rotate: {
+    type: Number,
+    default: -22,
+  },
+  /** 水印内容，需要显示多行情况下可配置为数组 */
+  watermarkContent: {
+    type: [Object, Array],
+  },
+  /** 水印宽度 */
+  width: {
+    type: Number,
+  },
+  /** 水印之间的水平间距 */
+  x: {
+    type: Number,
+  },
+  /** 水印之间的垂直间距 */
+  y: {
+    type: Number,
+  },
+  /** 水印元素的 `z-index`，默认值写在 CSS 中 */
+  zIndex: {
+    type: Number,
+  },
+};

package/dist/watermark/type.ts

@@ -0,0 +1,121 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdWatermarkProps {
+  /**
+   * 水印整体透明度，取值范围 [0-1]
+   * @default 1
+   */
+  alpha?: number;
+  /**
+   * 水印所覆盖的内容节点
+   */
+  content?: string;
+  /**
+   * 水印高度
+   */
+  height?: number;
+  /**
+   * 水印是否重复出现
+   * @default true
+   */
+  isRepeat?: boolean;
+  /**
+   * 水印的布局方式，rectangular：矩形，即横平竖直的水印；hexagonal：六边形，即错位的水印
+   * @default rectangular
+   */
+  layout?: 'rectangular' | 'hexagonal';
+  /**
+   * 行间距，只作用在多行（`content` 配置为数组）情况下
+   * @default 16
+   */
+  lineSpace?: number;
+  /**
+   * 水印是否可移动
+   * @default false
+   */
+  movable?: boolean;
+  /**
+   * 水印发生运动位移的间隙，单位：毫秒
+   * @default 3000
+   */
+  moveInterval?: number;
+  /**
+   * 水印在画布上绘制的水平和垂直偏移量，正常情况下水印绘制在中间位置，即 `offset = [gapX / 2, gapY / 2]`
+   */
+  offset?: Array<number>;
+  /**
+   * 水印是否可被删除
+   * @default true
+   */
+  removable?: boolean;
+  /**
+   * 水印旋转的角度，单位 °
+   * @default -22
+   */
+  rotate?: number;
+  /**
+   * 水印内容，需要显示多行情况下可配置为数组
+   */
+  watermarkContent?: WatermarkText | WatermarkImage | Array<WatermarkText | WatermarkImage>;
+  /**
+   * 水印宽度
+   */
+  width?: number;
+  /**
+   * 水印之间的水平间距
+   */
+  x?: number;
+  /**
+   * 水印之间的垂直间距
+   */
+  y?: number;
+  /**
+   * 水印元素的 `z-index`，默认值写在 CSS 中
+   */
+  zIndex?: number;
+}
+
+export interface WatermarkText {
+  /**
+   * 水印文本文字颜色
+   * @default rgba(0,0,0,0.1)
+   */
+  fontColor?: string;
+  /**
+   * 水印文本文字字体
+   * @default ''
+   */
+  fontFamily?: string;
+  /**
+   * 水印文本文字大小
+   * @default 16
+   */
+  fontSize?: number;
+  /**
+   * 水印文本文字粗细
+   * @default normal
+   */
+  fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder';
+  /**
+   * 水印文本内容
+   * @default ''
+   */
+  text?: string;
+}
+
+export interface WatermarkImage {
+  /**
+   * 水印图片是否需要灰阶显示
+   * @default false
+   */
+  isGrayscale?: boolean;
+  /**
+   * 水印图片源地址，为了显示清楚，建议导出 2 倍或 3 倍图
+   * @default ''
+   */
+  url?: string;
+}