Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 5.83 KB

README.md

File metadata and controls

80 lines (59 loc) · 5.83 KB
Raw

@watermarkify/vue-watermark

NPM version License Total NPM Download

@watermarkify/vue-watermark is a lightweight and customizable Vue.js component that allows you to easily add watermarks to your web applications. With Vue Watermark, you can overlay images or text on top of images, videos, or any other HTML elements to protect your content or add branding.

demo

Features

  • Simple integration: Easily add watermarks to your Vue.js applications with just a few lines of code.
  • Customizable options: Customize the watermark's appearance, position, size, and more to suit your needs.
  • Support for images and text: Add watermark images or text, and control various properties such as font style, color, and size.
  • Responsive design: The watermark adapts to different screen sizes and device orientations.

Installation

You can install @watermarkify/vue-watermark via npm or yarn:

npm install @watermarkify/vue-watermark
# or
yarn add @watermarkify/vue-watermark
# or
pnpm install @watermarkify/vue-watermark

Usage

The following code snippet is retrieved from playground. You may also try the interactive playground here.

<script setup lang="ts">
// step 1: import Watermark from @watermarkify/vue-watermark
import { Watermark } from '@watermarkify/vue-watermark'

// step 2: define watermark options
// see https://github.com/watermarkify/vue-watermark#options
const watermarkOptions = ref({
  content: 'watermark',
  gap: [20, 20],
  offset: [10, 10],
  zIndex: 5,
  rotate: -20,
})
</script>

Pass watermarkOptions to options and define your slot.

<Watermark :options="watermarkOptions">
  <div>This is the content of the slot.</div>
</Watermark>

Options

Property Description Type Default Value
width The width of the watermark in pixels. If not specified, defaults to the width of the container element. number 120
height The height of the watermark in pixels. If not specified, defaults to the height of the container element. number 64
content The text content to be used as the watermark. Can be a string or an array of strings. If image is provided, this property will be ignored. string or string[] undefined
gap The gap between each instance of the watermark in pixels. Can be an array with two values for horizontal and vertical gap, respectively. [number, number] [20, 20]
offset The offset of the watermark from the top-left corner of the container element in pixels. Can be an array with two values for horizontal and vertical offset, respectively. [number, number] [gap[0]/2, gap[1]/2]
zIndex The z-index of the watermark relative to other elements on the page. number 5
rotate The rotation angle in degrees of the watermark. Can be a value in the range [-180, 180]. number -20
font The font properties for the watermark text, including family, size, style, weight, and color. WatermarkFont { family: "sans-serif", size: 18, style: "normal", weight: "normal", color: "rgba(0,0,0,.2)" }

License

@watermarkify/vue-watermark is licensed under the MIT License. See the LICENSE file for more information.

Contributing

Contributions are welcome! To contribute to @watermarkify/vue-watermark, please fork the repository and submit a pull request.