1.0.0 • Published 5 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
5 years ago