directive-plugin指令插件相关参数文档

1、安装directive-plugin

npm install directive-plugin

// 在main.js 中引入
import directivePlugin from 'directive-plugin'
Vue.use(directivePlugin)

2、支持的指令：

1. v-custom-fade（淡入淡出）
2. v-watermark（水印）

2.1、v-custom-fade（淡入淡出）

参数	类型	默认值	说明
threshold	Number	0.01	定义元素与视口相交的比例达到多少时触发回调，可以设置为 0 到 1 之间的任何值（0.01即 1%）
rootMargin	String	60px 0px -60px 0px	在目标元素的周围扩展或收缩视口边界,顺序是 上、右、下、左

淡入淡出

2.2、v-watermark（水印）

参数	类型	默认值	说明
targetNode	String、Dom节点	当前节点	默认是挂载在当前节点下，非全屏，可设置fullScreen为true，则全屏显示
content	String、Array、Object	我的水印	非String类型，当作多行文本处理
fontWeight	Number	normal	字体的粗细
fontSize	Number	18	字体大小 px
fontFamily	String	sans-serif	字体
color	String	#666666	字体颜色
globalAlpha	Number	0.09	水印文本透明度 0~1 0 表示完全透明，1 表示完全不透明
width	Number	300	单个水印宽度 px
height	Number	170	单个水印高度 px
zIndex	Number	2147483647	水印节点层级(默认为最大层级)
backgroundPosition	String	0px 0px, 0px 0px	水印节点的背景图片位置
rotate	Number	330	水印旋转角度，以左上角为原点旋转，注意旋转角度影响水印文本显示
fullScreen	Boolean	false	是否使用全屏模式,挂载在body下，默认是全屏

效果如下

3、WaterMark 可支持单独使用

import { WaterMark } from 'directive-plugin'created() {this.$nextTick(() => {const watermark = new WaterMark({targetNode: '', // 需要添加水印的容器类名content: ['水印内容', new Date().toLocaleString()], // 水印内容width: 200,height: 150,fontSize: 16,alpha: 0.08})watermark.create()})
}

注意：需在dom结构加载完成使用，否则默认都是挂载body下