0.0.2 • Published 2 years ago
vatermark v0.0.2
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
Name | Type | Description | Default |
---|---|---|---|
content | string | Content of watermark. | - |
image | string | Image of watermark.If image is set, content will be ignored | - |
color | string | Color of content. | 'rgba(128, 128, 128, .1)' |
fontStyle | 'normal' | 'italic' | Font style of content. | 'normal' |
fontWeight | number | Font weight of content. | 400 |
fontFamily | string | Font family of content. | 'Helvetica, PingFang SC, Microsoft YaHei, Arial, sans-serif' |
fontSize | number | Font size of content in px. | 16 |
lineHeight | number | Line height of content in px. | 16 |
rotate | number | Rotate of content or image in degree. | -15 |
width | number | Width of content or image in px. | 400 |
height | number | Height of content or image in px. | 200 |
xOffset | number | Horizontal offset of content in px. | 20 |
yOffset | Vertical offset of content in px. | Vertical offset of content in px. | 40 |