1.0.0 • Published 7 years ago
vue-watermark-directive v1.0.0
安装
使用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 | 设置是否重复 |
1.0.0
7 years ago