水印

基础用法

手写 Vue2 水印组件，搭配若依系统使用,dynamicTime 动态水印时间。

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

<QWater ref="waterMark" :z-index="9" :text="['水印']" :dynamicTime="true" :numberTime="3">
  <div style="height: 400px;">
    <template v-for="item in 10">
      <p>测试 测试 测试 测试 测试 测试 测试</p>
    </template>
  </div>
</QWater>

Expand Copy Copy

不显示时间

手写 Vue2 水印组件，搭配若依系统使用。

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

<QWater ref="waterMark" :z-index="9" :text="['水印']" :show-time="false">
  <div style="height: 400px;">
    <template v-for="item in 10">
      <p>测试 测试 测试 测试 测试 测试 测试</p>
    </template>
  </div>
</QWater>

Expand Copy Copy

图片水印

图片水印会把文字水印覆盖,不能只设置image,需要先设置text,当图片找不到时渲染text。

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

测试 测试 测试 测试 测试 测试 测试

<QWater ref="waterMark1" :z-index="9" :text="['水印']" image="/logo.png">
  <div style="height: 400px;">
    <template v-for="item in 10">
      <p>测试 测试 测试 测试 测试 测试 测试</p>
    </template>
  </div>
</QWater>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
text	水印文本	Array / String	['水印']	—
fontSize	文字大小	Number	—	16
fontColor	文字颜色	String	—	'rgba(0, 0, 0, 0.2)'
rotate	旋转角度	Number	—	-22
textSpacingX	X相隔	Number	—	200
textSpacingY	Y相隔	Number	—	150
zIndex	层级	Number	—	9
image	图片	String	—	-
showTime	显示时间	Boolean	—	true
dynamicTime	动态时间	Boolean	—	false
numberTime	时间间隔/s	Number	—	1