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

ParametersDescriptionTypeDefault value
widthwatermark widthnumber100
heightwatermark heightnumber100
z-indexz-index of watermarknumber | string100
contentThe content of the text watermarkstring-
imageThe content of the image watermark. If passed in at the same time as content, the image watermark will be used firststring-
rotateThe rotation angle of the watermarknumber | string-22
full-pageWhether the watermark is displayed in full screenbooleanfalse
gap-xHorizontal gap between watermarksnumber0
gap-yVertical gap between watermarksnumber0
text-colorText watermark colorstring#dcdee0
opacityThe transparency of the watermarknumber | 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.

NameDefaultDescription
--z-watermark-z-index100The z-index level of the root node