Vue-watermark-v2 NPM

vue-watermark-v2(当前版本 V1.0.4)

简单、便捷、高效的 vue 水印设置组件

兼容版本

Vue2.6+

Install

	npm i vue-watermark-v2 -S

	//main.js
	import vwv from "vue-watermark-v2";
	Vue.use(vwv)

	//使用示例
    <vue-watermark-v2
      font-size="12"
      :rotate="-30"
      :mark-size="200"
      :gap="[68, 68]"
      :content="contents"
    >
    </vue-watermark-v2>

	contents: [
        {
          text: "",
          style: {
            fontSize: 16,
            fontFamily: "宋体",
            color: "red",
          },
        },
        {
          text: "by 能给你",
          style: {
            fontSize: 16,
            fontFamily: "宋体",
            color: "blue",
          },
        },
      ]

props

属性	类型	说明	默认	是否必传
defalutContent	String	默认水印名，传入的 content 没有指定 text，则用此字段	这是默认水印名	false
content	Array	传入的水印文本,详细看正文 content 说明	[]	false
image	String	水印设置为传入的图像，请传入完整的资源路径，若传入此，则不显示文字	""	false
pIndex	String	水印层级	9999	false
markSize	Number	水印默认大小	100	false
rotate	Number	旋转角度	-30	false
fontWeight	String	字体粗细设置(normal /light /weight / number 可选)	"light"	false
opacity	Number	透明度	0.3	false
color	String	字体颜色	"rgba(0, 0, 0)"	false
fontSize	Number/ String	字体的大小	12	false
fontFamily	String	字体	"serif"	false
gap	Array	水印之间的间隔,第一项指 X 轴，第二项 Y 轴	88, 88	false

content 字段配置

属性	类型	说明	是否必传
text	String	水印文字，若没指定，则显示 defalutContent 字段，若设置了 image 则不显示文字	true
style	Object	设置字段样式，若设置了 style，则优先取 style 中的，否则取 props 中默认值，具体配置项看下方 style	false

style 配置说明

属性	类型	说明	是否必传
fontWeight	String	字体粗细设置(normal /light /weight / number 可选)	false
color	String	字体颜色	false
fontSize	Number/ String	字体的大小	false
fontFamily	String	字体	false

Other

1、如果有其他问题邮件沟通1195669615@qq.com或者加 qq1195669615。

vue angular react mark watermark water-mark vue水印水印

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago