1.0.0 • Published 5 years ago

vue-watermark-directive v1.0.0

Weekly downloads
9
License
ISC
Repository
-
Last release
5 years ago

安装

使用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设置是否重复