Watermark
introduce
Adding specific text or patterns as watermarks on pages can be used to prevent information theft.
Code Demo
Text watermark
Set the text of the watermark through the content
attribute.
<z-watermark content="Zebra" :full-page="false" />
Image watermark
Set the watermark image through the image
attribute, and use opacity
to adjust the overall transparency of the watermark.
<z-watermark
:rotate="0"
image="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-ui/images/logo.png"
:opacity="0.2"
:full-page="false"
/>
Custom interval
Control the spacing between multiple repeating watermarks through the gap-x
and gap-y
attributes.
<z-watermark
:rotate="0"
image="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-ui/images/logo.png"
:gap-x="30"
:gap-y="10"
:opacity="0.2"
:full-page="false"
/>
Custom tilt angle
Use the rotate
attribute to control the tilt angle of the watermark. The default value is -22
.
<view class="demo-watermark-wrapper">
<z-watermark
image="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-ui/images/logo.png"
:rotate="22"
:opacity="0.2"
:full-page="false"
/>
</view>
Display range
Use the full-page
attribute to control the display range of the watermark.
<view class="demo-watermark-wrapper">
<z-button type="primary" @click="fullPage = !fullPage">
switch
</z-button>
<z-watermark
:rotate="0"
:full-page="fullPage"
:opacity="0.2"
image="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-ui/images/logo.png"
>
</z-watermark>
</view>
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
width | watermark width | number | 100 |
height | watermark height | number | 100 |
z-index | z-index of watermark | number | string | 100 |
content | The content of the text watermark | string | - |
image | The content of the image watermark. If passed in at the same time as content , the image watermark will be used first | string | - |
rotate | The rotation angle of the watermark | number | string | -22 |
full-page | Whether the watermark is displayed in full screen | boolean | false |
gap-x | Horizontal gap between watermarks | number | 0 |
gap-y | Vertical gap between watermarks | number | 0 |
text-color | Text watermark color | string | #dcdee0 |
opacity | The transparency of the watermark | number | string | - |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-watermark-z-index | 100 | The z-index level of the root node |