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