Watermarkit

Watermarkit directive for Vue2/3.

Get Started

$ yarn add v-watermarkit

import { createApp } from 'vue'
import Watermark from 'v-watermarkit'

const app = createApp({/* ... */})

app.use(Watermark)

Usage

<template>
  <div v-watermark="text"></div>
  <!-- or -->
  <div
    v-watermark="{
      text,
      color: `#aaa`,
      fontSize: 16,
      zIndex: 999,
      opacity: .3,
      rotate: 30,
      gap: 80,
    }"
  ></div>
</template>
<script setup>
import { ref } from 'vue'

const text = ref(`大板栗 banli.co`)
</script>

ScreenShot

Api

|props | type | default | | --- | --- | --- | | text | string | '' | | color | string | #999 | | fontSize | number | 12 | | zIndex | number | 9999 | | opacity | number | .1 | | rotate | number | 15 | | gap | number | 50 |

License

Licensed under the MIT License