v-watermarkit

Watermarkit

Watermarkit directive for Vue2/3.

Get Started

$ yarn add v-watermarkit

use globally

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

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

app.use(Watermark)

use in component

<script setup>
import { vWatermarkit } from 'v-watermarkit'
</script>

Usage

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

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