安装

使用npm安装

npm install vue-watermark-directive --save

使用

在应用初始化时，安装插件。

import Vue from 'vue'
import watermark from 'vue-watermark-directive'

Vue.config.productionTip = false
Vue.use(watermark)
...

这里也支持使用第二个参数来配置插件。

import Vue from 'vue'
import vueWatermark from 'vue-watermark-directive'

const DEFAULT_CONFIG = {
  zIndex: 1000,
  font: '16px microsoft yahei',
  color: 'rgba(0,0,0,0.05)',
  content: 'Hello World',
  rotate: 20,
  width: 100,
  height: 100,
  repeat: true
}

Vue.config.productionTip = false
Vue.use(vueWatermark, DEFAULT_CONFIG)
...

在使用vue模版中就可以使用v-watermark指令了。 支持直接绑定字符串，也可以传入自定义的配置。

使用字符串：

<div
  class="container"
  v-watermark="'ABC'">
</div>

使用自定义配置:

<div
  class="container"
  v-watermark="{
      content: 'ABC'
    }">
</div>

可配置字段

|字段|功能| |-|-| |zIndex|设置z-index| |color|水印颜色| |font|水印字体| |content|设置水印内容| |rotate|设置水印旋转角度| |width|设置宽度| |height|设置高度| |repeat|设置是否重复|