1.1.2 • Published 2 years ago

@zu1662/watermark-vue v1.1.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

@zu1662/watermark-vue

基于 @zu1662/watermark 的组件封装

使用

# npm
npm install @zu1662/watermark-vue

# yarn
yarn add @zu1662/watermark-vue

全局注册组件

// main ts
import WaterMarkInstall from '@zu1662/watermark-vue';
const app = Vue.createApp()
app.use(WaterMarkInstall)

// 使用
<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>

组件引用

<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>
<script>
import { WaterMark } from '@zu1662/watermark-vue';
export default defineComponent({
  components: {
    WaterMark,
  }
})
</script>

API

基本参数

参数说明类型默认值
text水印文本, 为数组时表示多行水印string | string[]-
visible水印是否显示booleantrue
options高级参数WatermarkOptionsnull

高级参数

参数说明类型默认值
monitor是否开启保护模式booleantrue
mode展示模式,interval表示错行展示stringinterval
gapX水印之间的水平间距number100
gapY水印之间的垂直间距number100
offsetLeft水印在 canvas 画布上绘制的水平偏移量number0
offsetTop水印在 canvas 画布上绘制的垂直偏移量number0
width单个水印宽度number120
height单个水印高度number64
useClientHeight是否使用元素或者父元素的ClientHeightbooleanfalse
image图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印string-
zIndex水印层级number9999
width单个水印宽度number120
height单个水印高度number64
opacity水印透明度number0.15
rotate旋转的角度number-22
fontSize设置字体大小number16
fontWeight设置字体粗细number | stringnormal
fontStyle规定字体样式stringnormal
fontVariant规定字体变体stringnormal
fontColor设置字体颜色string#000
fontFamily设置水印文字的字体stringsans-serif
1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago