0.0.2 • Published 2 years ago

vatermark v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

vatermark

Vatermark is a Vue plugin (support both Vue2 and Vue3) to generate watermark with a simple directive v-watermark.

Install

# pnpm
pnpm add vatermark

# yarn
yarn add vatermark

# npm
npm i vatermark

Usage

Vue3

import { createApp } from 'vue'
import { vatermark3 } from 'vatermark' // vatermark3 is for Vue3
import App from './App.vue'

const app = createApp(App)

// register plugin with custom options
app.use(vatermark3, {
  content: 'Hello, world!'
})

app.mount('#app')
<template>
  <div class="app" v-watermark></div>
</template>

Vue2

import Vue from 'vue'
import { vatermark2 } from 'vatermark' // vatermark2 is for Vue2
import App from './App.vue'

// register plugin with custom options
Vue.use(vatermark2, {
  content: 'Hello, world!'
})

new Vue({
  render: h => h(App)
}).$mount('#app')
<template>
  <div class="app" v-watermark></div>
</template>

Options

NameTypeDescriptionDefault
contentstringContent of watermark.-
imagestringImage of watermark.If image is set, content will be ignored-
colorstringColor of content.'rgba(128, 128, 128, .1)'
fontStyle'normal' | 'italic'Font style of content.'normal'
fontWeightnumberFont weight of content.400
fontFamilystringFont family of content.'Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif'
fontSizenumberFont size of content in px.16
lineHeightnumberLine height of content in px.16
rotatenumberRotate of content or image in degree.-15
widthnumberWidth of content or image in px.400
heightnumberHeight of content or image in px.200
xOffsetnumberHorizontal offset of content in px.20
yOffsetVertical offset of content in px.Vertical offset of content in px.40
0.0.2

2 years ago

0.0.1

2 years ago

1.0.0

2 years ago