20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,15 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The most basic usage.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-watermark content="Antdv Next">
|
||||
<div class="h-500px" />
|
||||
</a-watermark>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
# Custom configuration
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Preview the watermark effect by configuring custom parameters.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { ColorValueType, WatermarkProps } from 'antdv-next'
|
||||
import { computed, reactive } from 'vue'
|
||||
|
||||
const formState = reactive({
|
||||
content: 'Antdv Next',
|
||||
color: 'rgba(0, 0, 0, 0.15)' as ColorValueType,
|
||||
fontSize: 16,
|
||||
zIndex: 11,
|
||||
rotate: -22,
|
||||
gapX: 100,
|
||||
gapY: 100,
|
||||
offsetX: null as number | null,
|
||||
offsetY: null as number | null,
|
||||
})
|
||||
|
||||
const resolvedColor = computed(() => {
|
||||
const color = formState.color
|
||||
if (!color)
|
||||
return 'rgba(0, 0, 0, 0.15)'
|
||||
if (typeof color === 'string')
|
||||
return color
|
||||
if (!Array.isArray(color)) {
|
||||
return color.toRgbString()
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const watermarkProps = computed<WatermarkProps>(() => ({
|
||||
content: formState.content,
|
||||
zIndex: formState.zIndex,
|
||||
rotate: formState.rotate,
|
||||
gap: [formState.gapX, formState.gapY],
|
||||
offset: formState.offsetX != null && formState.offsetY != null
|
||||
? [formState.offsetX, formState.offsetY]
|
||||
: undefined,
|
||||
font: {
|
||||
color: resolvedColor.value,
|
||||
fontSize: formState.fontSize,
|
||||
},
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle">
|
||||
<a-watermark v-bind="watermarkProps">
|
||||
<a-typography>
|
||||
<a-typography-paragraph>
|
||||
The light-speed iteration of the digital world makes products more complex. However,
|
||||
human consciousness and attention resources are limited. Facing this design
|
||||
contradiction, the pursuit of natural interaction will be the consistent direction of
|
||||
Ant Design.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
Natural user cognition: According to cognitive psychology, about 80% of external
|
||||
information is obtained through visual channels. The most important visual elements in
|
||||
the interface design, including layout, colors, illustrations, icons, etc., should fully
|
||||
absorb the laws of nature, thereby reducing the user's cognitive cost and bringing
|
||||
authentic and smooth feelings. In some scenarios, opportunely adding other sensory
|
||||
channels such as hearing, touch can create a richer and more natural product experience.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
Natural user behavior: In the interaction with the system, the designer should fully
|
||||
understand the relationship between users, system roles, and task objectives, and also
|
||||
contextually organize system functions and services. At the same time, a series of
|
||||
methods such as behavior analysis, artificial intelligence and sensors could be applied
|
||||
to assist users to make effective decisions and reduce extra operations of users, to
|
||||
save users' mental and physical resources and make human-computer interaction more
|
||||
natural.
|
||||
</a-typography-paragraph>
|
||||
</a-typography>
|
||||
<img
|
||||
draggable="false"
|
||||
style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
||||
alt="img"
|
||||
>
|
||||
</a-watermark>
|
||||
<a-form :model="formState" layout="vertical" style="width: 200px; flex-shrink: 0; border-inline-start: 1px solid #eee; padding-inline-start: 16px;">
|
||||
<a-form-item label="Content">
|
||||
<a-input v-model:value="formState.content" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Color">
|
||||
<a-color-picker v-model:value="formState.color as any" />
|
||||
</a-form-item>
|
||||
<a-form-item label="FontSize">
|
||||
<a-slider v-model:value="formState.fontSize" :step="1" :min="1" :max="100" />
|
||||
</a-form-item>
|
||||
<a-form-item label="zIndex">
|
||||
<a-slider v-model:value="formState.zIndex" :step="1" :min="0" :max="100" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Rotate">
|
||||
<a-slider v-model:value="formState.rotate" :step="1" :min="-180" :max="180" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Gap" :style="{ marginBottom: 0 }">
|
||||
<a-flex gap="small">
|
||||
<a-form-item style="flex: 1">
|
||||
<a-input-number v-model:value="formState.gapX" placeholder="gapX" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item style="flex: 1">
|
||||
<a-input-number v-model:value="formState.gapY" placeholder="gapY" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-flex>
|
||||
</a-form-item>
|
||||
<a-form-item label="Offset" :style="{ marginBottom: 0 }">
|
||||
<a-flex gap="small">
|
||||
<a-form-item style="flex: 1">
|
||||
<a-input-number v-model:value="formState.offsetX" placeholder="offsetLeft" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item style="flex: 1">
|
||||
<a-input-number v-model:value="formState.offsetY" placeholder="offsetTop" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-flex>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,15 @@
|
||||
# Image watermark
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-watermark :height="30" :width="130" image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original">
|
||||
<div class="h-500px" />
|
||||
</a-watermark>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,15 @@
|
||||
# Multi-line watermark
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `content` to set a string array to specify multi-line text watermark content.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-watermark :content="['Antdv Next', 'Happy Working']">
|
||||
<div class="h-500px" />
|
||||
</a-watermark>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
# Modal or Drawer
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use in Modal and Drawer.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const showModal = shallowRef(false)
|
||||
const showDrawer = shallowRef(false)
|
||||
const showDrawer2 = shallowRef(false)
|
||||
|
||||
const placeholderStyle = {
|
||||
height: '300px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(150, 150, 150, 0.2)',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle">
|
||||
<a-button type="primary" @click="showModal = true">
|
||||
Show in Modal
|
||||
</a-button>
|
||||
<a-button type="primary" @click="showDrawer = true">
|
||||
Show in Drawer
|
||||
</a-button>
|
||||
<a-button type="primary" @click="showDrawer2 = true">
|
||||
Not Show in Drawer
|
||||
</a-button>
|
||||
</a-flex>
|
||||
<a-watermark content="Antdv Next">
|
||||
<a-modal
|
||||
v-model:open="showModal"
|
||||
destroy-on-hidden
|
||||
title="Modal"
|
||||
@ok="showModal = false"
|
||||
@cancel="showModal = false"
|
||||
>
|
||||
<div :style="placeholderStyle">
|
||||
A mock height
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-drawer
|
||||
v-model:open="showDrawer"
|
||||
destroy-on-hidden
|
||||
title="Drawer"
|
||||
@close="showDrawer = false"
|
||||
>
|
||||
<div :style="placeholderStyle">
|
||||
A mock height
|
||||
</div>
|
||||
</a-drawer>
|
||||
</a-watermark>
|
||||
<a-watermark content="Antdv Next" :inherit="false">
|
||||
<a-drawer
|
||||
v-model:open="showDrawer2"
|
||||
destroy-on-hidden
|
||||
title="Drawer"
|
||||
@close="showDrawer2 = false"
|
||||
>
|
||||
<div :style="placeholderStyle">
|
||||
A mock height
|
||||
</div>
|
||||
</a-drawer>
|
||||
</a-watermark>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Watermark
|
||||
description: Add specific text or patterns to the page.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
- Use when the page needs to be watermarked to identify the copyright.
|
||||
- Suitable for preventing information theft.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Multi-line watermark | demo/multi-line.md |
|
||||
| Image watermark | demo/image.md |
|
||||
| Custom configuration | demo/custom.md |
|
||||
| Modal or Drawer | demo/portal.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| width | The width of the watermark, the default value of `content` is its own width | number | 120 | - | × |
|
||||
| height | The height of the watermark, the default value of `content` is its own height | number | 64 | - | × |
|
||||
| inherit | Pass the watermark to the pop-up component such as Modal, Drawer | boolean | true | - | × |
|
||||
| rotate | When the watermark is drawn, the rotation angle, unit `°` | number | -22 | - | × |
|
||||
| zIndex | The z-index of the appended watermark element | number | 9 | - | × |
|
||||
| image | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | string | - | - | × |
|
||||
| content | Watermark text content. Pass a `WatermarkText` object to set per-line font styles | string \| [WatermarkText](#watermarktext) \| (string \| [WatermarkText](#watermarktext))[] | - | object usage: 1.4.0 | × |
|
||||
| font | Text style | [Font](#font) | [Font](#font) | - | × |
|
||||
| gap | The spacing between watermarks | \[number, number\] | \[100, 100\] | - | × |
|
||||
| offset | The offset of the watermark from the upper left corner of the container. The default is `gap/2` | \[number, number\] | \[gap\[0\]/2, gap\[1\]/2\] | - | × |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| remove | Callback when the watermark is removed by DOM mutation | () => void | - |
|
||||
|
||||
## Types
|
||||
### Font
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Font color | [CanvasFillStrokeStyles.fillStyle](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) | rgba(0,0,0,.15) | - |
|
||||
| fontSize | Font size | number \| string | 16 | - |
|
||||
| fontWeight | Font weight | `normal` \| `light` \| `weight` \| number | normal | - |
|
||||
| fontFamily | Font family | string | sans-serif | - |
|
||||
| fontStyle | Font style | `none` \| `normal` \| `italic` \| `oblique` | normal | - |
|
||||
| textAlign | Specify the text alignment direction | [CanvasTextAlign](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) | `center` | - |
|
||||
|
||||
### WatermarkText
|
||||
Configure the font style for a single line of a multi-line watermark (`1.4.0`).
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| text | Text content of the line | string | - | 1.4.0 |
|
||||
| font | Font style of the line, merged over the component-level `font` | [Font](#font) | - | 1.4.0 |
|
||||
|
||||
## FAQ
|
||||
|
||||
### Handle abnormal image watermarks
|
||||
When using an image watermark and the image loads abnormally, you can add `content` at the same time to prevent the watermark from becoming invalid.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-watermark
|
||||
:height="30"
|
||||
:width="130"
|
||||
content="Antdv Next"
|
||||
image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
|
||||
>
|
||||
<div style="height: 500px" />
|
||||
</a-watermark>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Why `overflow: hidden` style is added?
|
||||
Users can hide the watermark by setting the container height to 0 through the developer tool in previous versions. To avoid this situation, the container adds `overflow: hidden`. When the container height changes, the content is also hidden. You can override the style to modify this behavior:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-watermark :style="{ overflow: 'visible' }" />
|
||||
</template>
|
||||
```
|
||||
Reference in new issue
Block a user