HUI-VUE-Pro

# Watermark 水印

版本：1.14.0

开发：高明君

# 安装

$ npm i @hui-pro/watermark -D
# 或者
$ yarn add @hui-pro/watermark --dev

# 引入

import Watermark from '@hui-pro/watermark';
import '@hui-pro/watermark/theme/index.scss';
Vue.use(Watermark);

# 基础用法

基础用法
<h-watermark class="watermark-wrapper">
  <img src="/hui-pro/images/home-image-blue.png" alt="" />
  <template #chunk>
    <div>
      <div>用户名：测试水印</div>
      <div>时间：2019-10-18 10:26:00</div>
      <div>ip地址：127.0.0.1</div>
    </div>
  </template>
</h-watermark>

<style lang="scss" scoped>
  .watermark-wrapper {
    height: 600px;
  }
</style>

# 图片水印&自定义样式

基础用法
<h-watermark class="watermark-wrapper">
  <img src="/hui-pro/images/home-image-blue.png" alt="" />
  <template #chunk>
    <style>
      .watermark-chunk {
        transform: rotate(-25deg);
      }
    </style>
    <div class="watermark-chunk">
      <img :src="logo" alt="" />
    </div>
  </template>
</h-watermark>

# API

# Attributes

参数 说明 类型 可选值 默认值
size 水印区域格子大小 Object - {width:300,height:300}

# Slots

插槽名称 说明
chunk 自定义水印内容

TIP

  • 水印自定义 style 必须写在 chunk 插槽中
  • 自定义图片不支持跨域
  • 默认样式
.h-watermark__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.12);
  transform: rotate(-25deg);
}
  • 水印默认是没有 z-index，若想实现水印部分遮挡，内容增加 z-index 即可。

←